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

from application.components.conversation import (
    render_conversation_component,
    render_conversation_history_item,
    render_input_component,
    render_create_conversation_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.vstack(
                    # 标题
                    rx.hstack(
                        rx.text(
                            "对话历史",
                            font_size="var(--devui-font-size-lg)",  # 字体大小
                            font_weight="700",  # 字体粗细
                            margin_bottom="8px",  # 底部外边距
                            white_space="nowrap",  # 不换行
                        ),
                        display="flex",  # 弹性布局
                        align_items="center",  # 子元素垂直居中
                        justify_content="space-between",  # 子元素两端对齐
                    ),
                    # 渲染搜索栏(暂未实现)
                    # 渲染对话历史列表
                    rx.vstack(
                        rx.foreach(
                            ConversationState.get_conversation_history,
                            lambda item, _: render_conversation_history_item(
                                item[0], item[1]
                            ),
                        ),
                        flex="1",  # 占满父元素高度
                        margin_top="8px",  # 顶部外边距
                        width="100%",  # 宽度
                        overflow="auto",  # 允许溢出时显示垂直滚动条
                        align_items="stretch",  # 子元素水平拉伸
                    ),
                    backdrop_filter="blur(50px)",  # 背景模糊
                    background_color="#f9f9f9cc",  # 背景颜色
                    display="flex",  # 弹性布局
                    flex_direction="column",  # 垂直方向布局
                    gap="12px",  # 子元素间距
                    min_width="240px",  # 最小宽度
                    max_width="380px",  # 最大宽度
                    width="25%",  # 宽度
                    height="100%",  # 高度
                    padding="12px",  # 内边距
                    color="var(--devui-text)",
                    transition="all 0.3s ease-in-out",  # 过渡动画
                ),
                rx.fragment(),
            ),
            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.box(
            # 渲染内容排版层
            rx.vstack(
                # 渲染对话
                render_conversation_component(),
                # 渲染创建对话
                render_create_conversation_component(),
                # 渲染输入
                render_input_component(),
                width="100%",  # 宽度
                height="100%",  # 高度
                display="flex",  # 弹性布局
                flex_flow="column",  # 垂直方向布局
                align_items="center",  # 子元素水平居中
                gap="8px",  # 子元素间距
            ),
            background_color="linear-gradient(180deg, #fffffff2, #f8fafff2 99%)",  # 背景颜色
            position="relative",  # 相对定位
            display="flex",  # 弹性布局
            flex="1",  # 分配父容器宽度
            width="0",  # 宽度
            height="100%",  # 高度
        ),
        position="relative",  # 相对定位
        flex="1",  # 分配父容器宽度
        display="flex",  # 弹性布局
        overflow="hidden",  # 隐藏溢出内容
        height="100%",  # 高度
        min_height="0",  # 最小高度
        border_radius="12px",  # 圆角
    )