# -*- coding: utf-8 -*-
"""
根页面
"""

import reflex as rx

from application.components.frame import render_sidebar
from application.pages.conversation import render_conversation_page
from application.pages.knowledge_base import render_knowledge_base_page
from application.state.frame import FrameState


def render_index_page() -> rx.Component:
    """
    渲染根页面
    """
    return rx.hstack(
        # 渲染侧边栏
        render_sidebar(),
        # 根据选中侧边栏图标导航按钮渲染相应页面
        rx.match(
            FrameState.sidebar_icon_nav_button,
            # 渲染对话页面
            ("conversation", render_conversation_page()),
            # 渲染知识库页面
            ("knowledge_base", render_knowledge_base_page()),
        ),
        width="100vw",  # 铺满可视窗口
        height="100vh",
        spacing="0",  # 水平方向间距
        align_items="stretch",  # 垂直方向拉伸至父元素高度
        style={
            "background": "linear-gradient(rgb(208, 201, 255) 0%, rgb(230, 214, 240) 8%, rgb(241, 219, 234) 12%, rgb(200, 220, 251) 40%, rgb(171, 198, 246) 60%, rgb(135, 174, 254) 90%)"
        },  # 背景渐变
    )