# -*- coding: utf-8 -*-
"""
导航栏组件
"""

from reflex import (
    Component,
    badge as Badge,
    button as Button,
    color as Color,
    dialog as Dialog,
    divider as Divider,
    drawer as Drawer,
    foreach as Foreach,
    form as Form,
    heading as Heading,
    hstack as HStack,
    icon as Icon,
    input as Input,
    tooltip as Tooltip,
    vstack as VStack,
)

from ..state import State


def sidebar_session(session_name: str) -> Component:
    """
    侧边栏会话组件
    :param session_name: 会话名称
    :return: Component
    """
    return Drawer.close(
        HStack(
            Button(
                session_name,
                on_click=lambda: State.set_current_session(session_name),
                width="80%",
                variant="surface",
            ),
            Button(
                Icon(
                    tag="trash",
                    on_click=lambda: State.delete_session(session_name),
                    stroke_width=1,
                ),
                width="20%",
                variant="surface",
                color_scheme="red",
            ),
            width="100%",
        ),
        key=session_name,
    )


def sidebar(trigger) -> Component:
    """
    侧边栏组件
    """
    return Drawer.root(
        Drawer.trigger(trigger),
        Drawer.overlay(),
        Drawer.portal(
            Drawer.content(
                VStack(
                    Heading("Chats", color=Color("mauve", 11)),
                    Divider(),
                    Foreach(
                        State.get_session_names,
                        lambda session_name: sidebar_session(session_name),
                    ),
                    align_items="stretch",
                    width="100%",
                ),
                top="auto",
                right="auto",
                height="100%",
                width="20em",
                padding="2em",
                background_color=Color("mauve", 2),
                outline="none",
            )
        ),
        direction="left",
    )


def modal(trigger) -> Component:
    """A modal to create a new chat."""
    return Dialog.root(
        Dialog.trigger(trigger),
        Dialog.content(
            Form(
                HStack(
                    Input(
                        placeholder="Chat name",
                        name="session_name",
                        flex="1",
                        min_width="20ch",
                    ),
                    Button("Create chat"),
                    spacing="2",
                    wrap="wrap",
                    width="100%",
                ),
                on_submit=State.create_session,
            ),
            background_color=Color("mauve", 1),
        ),
        open=State.create_session_modal_is_open,
        on_open_change=State.toggle_create_session_modal,
    )


def navbar():
    return HStack(
        Badge(
            State.current_session_name,
            Tooltip(
                Icon("info", size=14),
                content="The current selected chat.",
            ),
            size="3",
            variant="soft",
            margin_inline_end="auto",
        ),
        modal(
            Icon("message-square-plus"),
        ),
        sidebar(
            Icon(
                "messages-square",
                background_color=Color("mauve", 6),
            )
        ),
        justify_content="space-between",
        align_items="center",
        padding="12px",
        border_bottom=f"1px solid {Color('mauve', 3)}",
        background_color=Color("mauve", 2),
    )