from dash import html, dcc
from datetime import date
import dash_bootstrap_components as dbc
from datetime import date, 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(
            dcc.DatePickerRange(
                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(
                        html.Div(
                            "Data Pipeline For YNAB, Preview Visualisations",
                            className="text-center text-light",
                        ),
                        width=12,
                    )
                ),
                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(f"""
## Total Spend:
### £{data['total_spend']:,}
"""),
                                    ]
                                ),
                                id='total_spend',
                                className="mb-4",
                            ),
                            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,
        ),
    ]