from dash import html, dcc
from datetime import date
import dash_bootstrap_components as dbc
from datetime import timedelta

today = date.today()
one_year_ago = today - timedelta(days=365)


def create_layout(data):
    main_body = create_main_body(data)
    topbar = create_topbar()

    return [html.Div(topbar + main_body)]


def create_topbar():
    return [
        dbc.Container(
            [
                dbc.Row(
                    dbc.Col(
                        html.Div(
                            html.H1("Data Pipeline For YNAB, Preview Visualisations"),
                            className="text-center text-light",
                        ),
                        width=12,
                    )
                ),
                dbc.Row(
                    [
                        dbc.Col(
                            dcc.DatePickerRange(
                                first_day_of_week=1,
                                display_format="YYYY-MM-DD",
                                id="date-picker-range",
                                start_date=one_year_ago,
                                end_date=today,
                            ),
                            width=4,
                        ),
                        dbc.Col(
                            html.Button(
                                "Change Date Range", id="date-range-confirm-button"
                            ),
                            width=2,
                        ),
                    ]
                ),
            ]
        )
    ]


def create_main_body(data):
    return [
        dbc.Container(
            [
                dbc.Row(
                    [
                        dbc.Col(
                            dbc.Card(
                                dbc.CardBody(
                                    [
                                        html.H4(
                                            "Spend Per Day", className="card-title"
                                        ),
                                        dcc.Graph(
                                            figure=data["spend_per_day_line"],
                                            id="spend_per_day",
                                        ),
                                    ]
                                ),
                                className="mb-4",
                            ),
                            width=12,
                        )
                    ]
                ),
                dbc.Row(
                    [
                        dbc.Col(
                            dbc.Card(
                                dbc.CardBody(
                                    [
                                        html.H4(
                                            "Spend Per Category", className="card-title"
                                        ),
                                        dcc.Graph(
                                            figure=data["spend_per_category_bar"],
                                            id="spend_per_category",
                                        ),
                                    ]
                                ),
                                className="mb-4",
                            ),
                            width=5,
                        ),
                        dbc.Col(
                            dbc.Card(
                                dbc.CardBody(
                                    [
                                        dcc.Markdown("## Total Spend:"),
                                        dcc.Markdown(
                                            data["total_spend"], id="total_spend"
                                        ),
                                    ],
                                ),
                                className="text-center text-light",
                            ),
                            width=2,
                        ),
                        dbc.Col(
                            dbc.Card(
                                dbc.CardBody(
                                    [
                                        html.H4(
                                            "Spend Per Payee", className="card-title"
                                        ),
                                        dcc.Graph(
                                            figure=data["spend_per_payee_bar"],
                                            id="spend_per_payee",
                                        ),
                                    ]
                                ),
                                className="mb-4",
                            ),
                            width=5,
                        ),
                    ]
                ),
            ],
            fluid=True,
        ),
    ]