'''Module to create a Dash app that displays visualizations of YNAB data.'''
import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

import visuals.layout as layout



# Initialize the app with a dark theme
app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])

# App layout
app.layout = layout.create_layout()

# Update toggle visibility of off-canvas section
@app.callback(
    Output('off-canvas-section', 'style'),
    [Input('toggle-button', 'n_clicks')]
)
def update_off_canvas_section(n_clicks):
    if n_clicks is not None:
        return {'display': 'block'}
    else:
        return {'display': 'none'}

# Update off-canvas section with date range picker
@app.callback(
    Output('off-canvas-section', 'children'),
    [Input('toggle-button', 'n_clicks')]
)
def update_off_canvas_content(n_clicks):
    if n_clicks is not None:
        # Include a date range picker library (e.g., Dash Bootstrap components) for the off-canvas section        
        return [
            dbc.Input(id='date-picker-start', type='date'),
            dbc.Input(id='date-picker-end', type='date')
        ]