# -*- coding: utf-8 -*-
"""
对话页面
"""
import reflex as rx

from application.components.conversation import (
    render_conversation_component,
    render_conversation_item_component,
    render_input_component,
)
from application.state.conversation import ConversationState
from application.state.conversation_history_collapse import (
    ConversationHistoryCollapseState,
)


def render_conversation_page() -> rx.Component:
    """
    渲染对话页面：左侧为对话历史折叠面板，右侧为对话和输入等组件
    """
    # 对话历史折叠面板打开状态
    is_open = ConversationHistoryCollapseState.is_open

    return rx.hstack(
        # 渲染对话历史组件（聊天容器左侧部分），若对话历史列表
        rx.hstack(
            # 若对话历史折叠面板关闭则不渲染，否则渲染
            rx.cond(
                is_open,
                rx.fragment(),
                # 渲染对话历史组件
                rx.box(
                    rx.vstack(
                        # 标题
                        rx.text(
                            "对话历史", font_size="16px", weight="bold", width="100%"
                        ),
                        # 分割线
                        rx.divider(),
                        # 遍历渲染对话字典
                        rx.foreach(
                            ConversationState.get_conversations,
                            lambda i, _: render_conversation_item_component(i[0], i[1]),
                        ),
                        rx.vstack(
                            rx.icon("box", size=64, color=rx.color("mauve", 8)),
                            rx.text("无数据", size="3", color=rx.color("mauve", 10)),
                            align_items="center",
                            justify_content="center",
                            flex="1",
                            margin_top="60px",
                        ),
                        align_items="stretch",
                        width="100%",
                        spacing="2",
                        padding="2em",
                    ),
                    width="20em",
                    height="100vh",
                    background_color=rx.color("mauve", 1),
                ),
            ),
            rx.button(
                rx.cond(
                    is_open,
                    rx.icon("chevron-left", size=16),
                    rx.icon("chevron-right", size=16),
                ),
                width="24px",
                height="80px",
                border_radius=rx.cond(is_open, "0 8px 8px 0", "9999px"),
                background=rx.color("mauve", 2),
                variant="ghost",
                box_shadow="0 2px 8px rgba(0,0,0,0.08)",
                on_click=ConversationHistoryCollapseState.toggle,
            ),
            align_items="center",
            height="100vh",
            spacing="0",
        ),
        # 渲染对话、输入和其它组件（聊天容器右侧部分）
        rx.vstack(
            render_conversation_component(),
            render_input_component(),
            flex=1,
            height="100vh",
            spacing="0",
        ),
        width="100vw",
        height="100vh",
        spacing="0",
        align_items="stretch",
    )