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

import reflex as rx

from application.state.chat import ChatState
from application.state.create_chat_modal import CreateChatModalState


def create_chat_modal_component(trigger) -> rx.Component:
    """
    新建聊天模态窗组件
    """
    return rx.dialog.root(
        rx.dialog.trigger(trigger),
        rx.dialog.content(
            rx.form(
                rx.hstack(
                    rx.input(
                        name="chat_description",
                        placeholder="聊天描述",
                        flex="auto",
                        min_width="20ch",
                    ),
                    rx.button("新建聊天"),
                    spacing="2",
                    wrap="wrap",
                    width="100%",
                ),
                on_submit=ChatState.create_chat,
            ),
            background_color=rx.color("mauve", 1),
        ),
        open=CreateChatModalState.is_open,
        on_open_change=CreateChatModalState.toggle,
    )


def chat_item_component(chat_id: str) -> rx.Component:
    """
    聊天项组件
    :param chat_id: 聊天唯一标识
    :return: Component
    """
    return rx.drawer.close(
        rx.hstack(
            rx.button(
                ChatState.get_chat_descriptions[chat_id],
                on_click=lambda: ChatState.switch_chat(chat_id),  # 点击按钮将切换会话
                width="80%",
                variant="surface",
            ),  # 点击按钮将切换聊天
            rx.button(
                rx.icon(
                    tag="trash",
                    on_click=lambda: ChatState.delete_chat(chat_id),  # 点击按钮删除聊天
                    stroke_width=1,
                ),
                width="20%",
                variant="surface",
                color_scheme="red",
            ),
            width="100%",
        ),
        key=chat_id,  # 使用聊天唯一标识作为键
    )


def chat_list_component(trigger) -> rx.Component:
    """
    聊天列表组件
    """
    return rx.drawer.root(
        rx.drawer.trigger(trigger),
        rx.drawer.overlay(),
        rx.drawer.portal(
            rx.drawer.content(
                rx.vstack(
                    rx.heading("聊天列表", color=rx.color("mauve", 11)),
                    rx.divider(),
                    rx.foreach(
                        ChatState.get_chat_ids,  # 获取所有聊天唯一标识
                        lambda chat_id: chat_item_component(
                            chat_id=chat_id
                        ),  # 创建聊天组件
                    ),
                    align_items="stretch",
                    width="100%",
                ),
                top="auto",
                right="auto",
                height="100%",
                width="20em",
                padding="2em",
                background_color=rx.color("mauve", 2),
                outline="none",
            )
        ),
        direction="left",
    )


def navbar_component() -> rx.Component:
    """
    导航栏组件
    """
    return rx.hstack(
        rx.badge(
            ChatState.get_chat_descriptions[ChatState.current_chat_id],
            size="3",
            variant="soft",
            margin_inline_end="auto",
        ),
        create_chat_modal_component(
            rx.box(rx.tooltip(rx.icon("message-square-plus"), content="新建聊天"))
        ),
        chat_list_component(
            rx.box(
                rx.tooltip(
                    rx.icon("messages-square"),
                    content="聊天历史",
                )
            )
        ),
        justify_content="space-between",
        align_items="center",
        padding="12px",
        border_bottom=f"1px solid {rx.color('mauve', 3)}",
        background_color=rx.color("mauve", 2),
    )