# -*- coding: utf-8 -*-
"""
渲染框架相关组件
"""

import reflex as rx

from application.state.frame import FrameState


def render_sidebar() -> rx.Component:
    """
    渲染侧边栏
    """

    # 初始化按钮字典
    BUTTONS = {
        "conversation": {"src": "/conversation.svg", "text": "对话"},
        "knowledge_base": {"src": "/knowledge_base.svg", "text": "知识库"},
    }

    def render_button(
        button: str,
    ) -> rx.Component:
        """
        渲染按钮
        :param button: 按钮名称
        """
        # 指定按钮的激活状态
        is_actived = button == FrameState.sidebar_icon_nav_button

        return rx.box(
            # 渲染图标
            rx.box(
                rx.image(
                    src=BUTTONS[button]["src"],
                    width="24px",
                    height="24px",
                    object_fit="contain",  # 等比缩放
                ),
                display="flex",  # 弹性布局
                justify_content="center",  # 水平居中对齐
                align_items="center",  # 垂直居中对齐
                width="36px",  # 宽度
                height="36px",  # 高度
                border_radius="var(--devui-border-radius-card)",  # 圆角
                # 若已激活则渲染图标盒子背景颜色和阴影，否则不渲染
                style={
                    "background-color": rx.cond(
                        is_actived, "var(--devui-base-bg)", "transparent"
                    ),
                    "box-shadow": rx.cond(is_actived, "0 4px 12px #0000001a", "none"),
                },
            ),
            # 渲染标签
            rx.text(
                BUTTONS[button]["text"],
                color="var(--devui-text)",
                font_size="var(--devui-font-size-sm)",
                line_height="20px",
            ),
            display="flex",  # 弹性布局
            flex_direction="column",  # 垂直方向布局
            align_items="center",  # 垂直居中对齐
            gap="4px",
            font_size="var(--devui-font-size-sm)",  # 字体大小
            cursor="pointer",  # 鼠标指针
        )

    return rx.vstack(
        # 渲染顶部
        rx.vstack(
            # 渲染品牌 LOGO 和名称
            rx.vstack(
                rx.image(
                    src="/logo.png",
                    width="34px",
                    height="34px",
                    object_fit="contain",  # 等比缩放
                ),
                rx.text(
                    "Gluballu",
                    line_height="20px",  # 行高
                    font_size="11px",
                    font_weight="700",
                    color="var(--devui-text)",
                ),
                display="flex",  # 弹性布局
                flex_direction="column",  # 垂直方向布局
                justify_content="center",  # 子元素垂直居中分布
                align_items="center",  # 子元素水平居中
                gap="4px",
            ),
            # 渲染分隔线
            rx.divider(
                width="32px", height="1px", margin="16px 0", background_color="#babbc0"
            ),
            # 渲染按钮：对话
            render_button(button="conversation"),
            # 渲染按钮：知识库
            render_button(button="knowledge_base"),
            margin_top="12px",  # 上外边距
            display="flex",  # 弹性布局
            flex_direction="column",  # 垂直方向布局
            align_items="center",  # 子元素水平居中
            width="100%",  # 宽度为父容器宽度
        ),
        display="flex",  # 弹性布局
        flex_direction="column",  # 垂直方向布局
        justify_content="space-between",  # 子元素垂直两端分布
        align_items="center",  # 子元素水平居中
        width="60px",  # 宽度
        height="100%",  # 高度
        box_sizing="border-box",  # 盒模型
    )