import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash import html
from dash_iconify import DashIconify

filter_pars = dmc.Group(
    spacing="xl",
    children=[
        dmc.Select(
            data=["Paris", "Lyon", "Bordeaux", "Angers"],
            icon=html.I(className="fas fa-store"),
            searchable=True,
            clearable=True,
            placeholder="Select a store",
            persistence=True,
            size="xs",
            nothingFound="No store found",
            style={"width": 180},
        ),
        dmc.DateRangePicker(
            size="xs",
            id="input-date",
            icon=html.I(className="fas fa-calendar"),
            value=["2021-01-01", "2021-12-31"],
            inputFormat="DD/MM/YYYY",
            persistence=True,
            amountOfMonths=1,
            label=None,
            style={"width": 200},
            placeholder="Select a date range",
        ),
        dmc.Switch(
            size="md",
            offLabel=DashIconify(icon="uiw:table", width=15),
            onLabel=DashIconify(icon="solar:chart-bold-duotone", width=15),
            color="#004857",
            checked=True,
        ),
    ],
)

searchbar = dmc.TextInput(
    id="searchbar",
    style={"width": "100%"},
    size="lg",
    radius="lg",
    placeholder="What do you want to know about your business?",
    icon=DashIconify(icon="material-symbols:search"),
    rightSection=dmc.ActionIcon(
        DashIconify(
            icon="material-symbols:send-rounded",
            color="#004857",
        ),
        id="searchbar-submit",
    ),
)

header = dbc.Row(
    dmc.Stack(
        [
            # dmc.Space(h=10),
            searchbar,
            # filter_pars,
        ],
        align="center",
    ),
    class_name="mb-3",
)

body = html.Div(children=[], id="body")

layout = dbc.Container(
    [header, body],
    fluid=True,
)