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,
        ),
    ]