import dash
import dash_mantine_components as dmc
from dash import dcc, html
from dash_iconify import DashIconify

dash.register_page(
    __name__,
    class_icon="fa-solid fa-chart-column",
    order=1,
    path="/",
    name="Store Copilot",
    title="ChartGPT",
)


layout = dmc.Stack(
    [
        dcc.Store(id="history", data=[], storage_type="local"),
        dmc.TextInput(
            styles={
                "input": {
                    "fontSize": 15,
                    "boxShadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
                    "border": "none",
                },
            },
            id="prompt",
            placeholder="What do you want to know about your business?",
            icon=DashIconify(icon="ic:round-search"),
            radius="lg",
            size="lg",
            w="80%",
            m="auto",
            rightSection=dmc.ActionIcon(
                DashIconify(icon="ic:round-send", width=20),
                id="button",
                radius="md",
                size="lg",
                mr=17,
            ),
        ),
        dmc.Grid(
            children=[
                dmc.Col(
                    dmc.Card(
                        dmc.Stack(
                            [
                                dmc.Title(
                                    "Generated chart", order=3, mb=4, align="center",
                                ),
                                html.Div(id="container"),
                            ]
                        )
                    ),
                    span=8,
                ),
                dmc.Col(
                    dmc.Card(
                        [
                            dmc.Title("History", order=3, mb=4, align="center"),
                            dmc.Accordion(
                                id="history-list",
                                children=[],
                                radius="md",
                                chevron=DashIconify(
                                    icon="ic:round-history",
                                    width=15,
                                ),
                                chevronPosition="left",
                                variant="contained",
                                styles={
                                    "item": {
                                        "backgroundColor": dmc.theme.DEFAULT_COLORS[
                                            "gray"
                                        ][0],
                                        "transition": "transform 150ms ease",
                                        "&[data-active]": {
                                            "transform": "scale(1.03)",
                                            "backgroundColor": "",
                                            "boxShadow": 5,
                                            "borderRadius": 5,
                                        },
                                    },
                                    "chevron": {
                                        "&[data-rotate]": {
                                            "transform": "rotate(-180deg)",
                                        },
                                    },
                                },
                            ),
                        ],
                        id="history-container",
                    ),
                    span=4,
                ),
            ],
            gutter="xl",
        ),
    ],
    spacing="xl",
)