"""Browser UI for the pyTincture 1.0.0rc6 + dhxpyt 0.9.18 quickstart."""

import sys

if sys.platform != "emscripten":
    raise SystemExit(
        "This file runs in the browser. Download service.py and widget.py from "
        "https://pytincture.com/dhxpyt.html#quickstart, then run: "
        "python -m uvicorn service:app --host 127.0.0.1 --port 8070"
    )

import json
import js
import widget
from dhxpyt.grid import GridColumnConfig, GridConfig
from dhxpyt.layout import CellConfig, LayoutConfig, MainWindow
from dhxpyt.sidebar import NavItemConfig, SidebarConfig
from dhxpyt.toolbar import ButtonConfig, ToolbarConfig

SAMPLE_DATA = [
    {"id": 1, "name": "Item 1", "value": 100},
    {"id": 2, "name": "Item 2", "value": 200},
    {"id": 3, "name": "Item 3", "value": 300},
]


class quickstart(MainWindow):
    layout_config = LayoutConfig(
        type="line",
        cols=[
            CellConfig(id="sidebar", width="auto"),
            CellConfig(id="content"),
        ],
    )

    def load_ui(self):
        js.document.title = "pyTincture + DHTMLX quickstart"
        self.dark = False
        self.next_id = 4
        self.set_theme("light")

        self.sidebar = self.add_sidebar(
            id="sidebar",
            sidebar_config=SidebarConfig(
                width=200,
                collapsed=False,
                data=[
                    NavItemConfig(id="toggle", value="Toggle menu", icon="mdi mdi-menu"),
                    NavItemConfig(id="items", value="Items", icon="mdi mdi-view-list"),
                ],
            ),
        )
        self.sidebar.on_click(self.sidebar_clicked)
        self.sidebar.select("items")

        content = self.add_layout(
            id="content",
            layout_config=LayoutConfig(
                type="line",
                rows=[CellConfig(id="toolbar", height=56), CellConfig(id="grid")],
            ),
        )
        self.toolbar = content.add_toolbar(
            id="toolbar",
            toolbar_config=ToolbarConfig(
                data=[
                    ButtonConfig(id="add", value="Add item", icon="mdi mdi-plus"),
                    ButtonConfig(id="reset", value="Reset data", icon="mdi mdi-refresh"),
                    ButtonConfig(id="theme", value="Dark theme", icon="mdi mdi-theme-light-dark"),
                ]
            ),
        )
        self.toolbar.on_click(self.toolbar_clicked)

        self.grid = content.add_grid(
            id="grid",
            grid_config=GridConfig(
                columns=[
                    GridColumnConfig(id="id", type="number", width=90, header=[{"text": "ID"}]),
                    GridColumnConfig(id="name", header=[{"text": "Name"}]),
                    GridColumnConfig(id="value", type="number", header=[{"text": "Value"}]),
                ],
                data=[dict(row) for row in SAMPLE_DATA],
                autoWidth=True,
                selection="row",
            ),
        )

    def sidebar_clicked(self, item_id, event):
        if item_id == "toggle":
            self.sidebar.toggle()

    def toolbar_clicked(self, item_id, event):
        if item_id == "add":
            row = {"id": self.next_id, "name": f"Item {self.next_id}", "value": self.next_id * 100}
            self.grid.grid.data.add(js.JSON.parse(json.dumps(row)))
            self.next_id += 1
        elif item_id == "reset":
            self.grid.grid.data.removeAll()
            self.grid.grid.data.parse(js.JSON.parse(json.dumps(SAMPLE_DATA)))
            self.next_id = 4
        elif item_id == "theme":
            self.dark = not self.dark
            self.set_theme("dark" if self.dark else "light")
            self.toolbar.update_item("theme", {"value": "Light theme" if self.dark else "Dark theme"})