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


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=date(2024, 1, 1),
                            end_date=date(2026, 1, 1),
                        ),
                        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),
                                    ]
                                ),
                                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),
                                    ]
                                ),
                                className="mb-4",
                            ),
                            width=5,
                        ),
                        dbc.Col(
                            dbc.Card(
                                dbc.CardBody(
                                    [
                                        dcc.Markdown(f"""
## Total Spend:
### £{data.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),
                                    ]
                                ),
                                className="mb-4",
                            ),
                            width=5,
                        ),
                    ]
                ),
            ],
            fluid=True,
        ),
    ]