#!/usr/bin/env -S uv run --script
# /// script
# dependencies = [
#   "nicegui==3.16.0",
# ]
# ///

from datetime import UTC
from datetime import datetime

from nicegui import events
from nicegui import ui

OPTIONS = {
    "python": "Python",
    "typescript": "TypeScript",
    "rust": "Rust",
}


with ui.card().classes("w-140 max-w-full"):
    ui.label("Select event mechanics").classes("text-xl font-semibold")
    event_log = ui.log(max_lines=12).classes("w-full h-64")

    def record(event_name: str, payload: object) -> None:
        timestamp = datetime.now(UTC).astimezone().strftime("%H:%M:%S")
        event_log.push(f"{timestamp}  {event_name}: {payload!r}")

    def handle_change(event: events.ValueChangeEventArguments) -> None:
        record("on_change event.value", event.value)

    def handle_model_update(event: events.GenericEventArguments) -> None:
        record("js_handler -> handler event.args", event.args)

    language = (
        ui.select(
            options=OPTIONS,
            value="python",
            label="Language",
            on_change=handle_change,
            with_input=True,
            clearable=True,
        )
        .props("outlined options-dense")
        .classes("w-full text-h6")
    )

    language.on("popup-show", lambda: record("popup-show", None), args=[])
    language.on("popup-hide", lambda: record("popup-hide", None), args=[])

    # This only fires when the value is changed from the browser side (not from the button)
    language.on(
        "update:model-value",
        handler=handle_model_update,
        js_handler="(...args) => emit(...args)",
    )

    with ui.row().classes("w-full justify-end"):
        ui.button("Set Rust", on_click=lambda: language.set_value("rust"))
        ui.button("Clear log", on_click=event_log.clear).props("flat")


if __name__ in {"__main__", "__mp_main__"}:
    ui.run(port=8888, reload=True)