from datetime import date
from typing import Tuple
from dash import Dash, Input, Output, _dash_renderer, callback, html
import dash_mantine_components as dmc
_dash_renderer._set_react_version("18.2.0")
app = Dash(__name__, external_stylesheets=dmc.styles.ALL)
app.layout = dmc.MantineProvider(
    [
        html.H1(children="My beautiful app", style={"textAlign": "center"}),
        dmc.Container([
            dmc.Stack(
                [
                    dmc.MonthPickerInput(
                        id="month-range", type="range", debounce=True, clearable=True
                    ),
                    dmc.Text(id="show-range"),
                ],
            ),
            # demo of issue #463.  This should be full width
            dmc.Group(dmc.MonthPickerInput(style={"flexGrow":1}))
        ]),
    ]
)
@callback(
    Output("show-range", "children"),
    Input("month-range", "value"),
    prevent_initial_call=True,
)
def month_range_changed(month_range: Tuple[date, date]):
    if month_range is not None:
        return f"Between {month_range[0]} and {month_range[1]}"
if __name__ == "__main__":
    app.run(debug=True)