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

import reflex

from ..state import State


def create_session_modal(trigger) -> reflex.Component:
    """
    创建会话模态窗组件
    """
    return reflex.dialog.root(
        reflex.dialog.trigger(trigger),
        reflex.dialog.content(
            reflex.form(
                reflex.hstack(
                    reflex.input(
                        name="session_name",
                        placeholder="会话名称",
                        flex="auto",
                        min_width="20ch",
                    ),
                    reflex.button("创建会话"),
                    spacing="2",
                    wrap="wrap",
                    width="100%",
                ),
                on_submit=State.create_session,
            ),
            background_color=reflex.color("mauve", 1),
        ),
        open=State.create_session_modal_is_open,
        on_open_change=State.toggle_create_session_modal,
    )


def session_history_item(session_name: str) -> reflex.Component:
    """
    会话历史侧边栏中一次会话组件
    :param session_name: 会话名称
    :return: Component
    """
    return reflex.drawer.close(
        reflex.hstack(
            reflex.button(
                session_name,
                on_click=lambda: State.switch_session(
                    session_name
                ),  # 点击按钮将切换会话
                width="80%",
                variant="surface",
            ),
            reflex.button(
                reflex.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 session_history(trigger) -> reflex.Component:
    """
    会话历史侧边栏组件
    """
    return reflex.drawer.root(
        reflex.drawer.trigger(trigger),
        reflex.drawer.overlay(),
        reflex.drawer.portal(
            reflex.drawer.content(
                reflex.vstack(
                    reflex.heading("会话列表", color=reflex.color("mauve", 11)),
                    reflex.divider(),
                    reflex.foreach(
                        State.get_session_names,  # 获取所有会话名称
                        lambda session_name: session_history_item(
                            session_name=session_name
                        ),  # 创建会话组件
                    ),
                    align_items="stretch",
                    width="100%",
                ),
                top="auto",
                right="auto",
                height="100%",
                width="20em",
                padding="2em",
                background_color=reflex.color("mauve", 2),
                outline="none",
            )
        ),
        direction="left",
    )


def navigation_bar() -> reflex.Component:
    """
    导航栏组件
    """
    return reflex.hstack(
        reflex.badge(
            State.current_session_name,
            size="3",
            variant="soft",
            margin_inline_end="auto",
        ),
        create_session_modal(
            reflex.box(
                reflex.tooltip(reflex.icon("message-square-plus"), content="创建会话")
            )
        ),
        session_history(
            reflex.box(
                reflex.tooltip(
                    reflex.icon("messages-square"),
                    content="会话历史",
                )
            )
        ),
        justify_content="space-between",
        align_items="center",
        padding="12px",
        border_bottom=f"1px solid {reflex.color('mauve', 3)}",
        background_color=reflex.color("mauve", 2),
    )