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

import visuals.components as charts

def create_layout():
    main_body = create_main_body()
    sidebar = create_sidebar()
    
    return [html.Div(main_body + sidebar)]

def create_sidebar():
    return [
        html.Div(id='off-canvas-section', style={'display': 'none'}),
        dbc.Row(
            dbc.Col(
                dcc.DatePickerRange(
        id='date-picker-range',
        start_date=date(2024, 1, 1),
        end_date=date(2026, 1, 1)
    ),
                width=4
            ),
            align='center'
        )
    ]

def create_main_body():
    return [html.Button('Toggle Off-Canvas', id='toggle-button'),
        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=charts.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=charts.spend_per_category_bar),
                                ]
                            ),
                            className="mb-4",
                        ),
                        width=5,
                    ),
                    dbc.Col(
                        dbc.Card(
                            dbc.CardBody(
                                [
                                    dcc.Markdown(f"""
## Total Spend:
### £{charts.total_spend:,}
"""),
                                ]
                            ),
                            className="mb-4",
                        ),
                        width=2,
                    ),
                    dbc.Col(
                        dbc.Card(
                            dbc.CardBody(
                                [
                                    html.H4("Spend Per Payee", className="card-title"),
                                    dcc.Graph(figure=charts.spend_per_payee_bar),
                                ]
                            ),
                            className="mb-4",
                        ),
                        width=5,
                    ),
                ]
            ),
        ],
        fluid=True,
    )
    ]