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

import reflex as rx

from application.state.frame import FrameState

# 初始化侧边栏图标导航按钮字典
sidebar_icon_nav_buttons = {
    "conversation": {"src": "/conversation.svg", "text": "对话"},
    "knowledge_base": {"src": "/knowledge_base.svg", "text": "知识库"},
}


def render_brand_logo(width: str = "34px", height: str = "34px") -> rx.Component:
    """
    渲染品牌 Logo
    :param width: 宽度，默认为 34px
    :param height: 高度，默认为 34px
    """
    return rx.image(
        src="/logo.png",
        width=width,
        height=height,
        object_fit="contain",  # 等比缩放
    )


def render_sidebar_icon_nav_button(
    sidebar_icon_nav_button: str,
) -> rx.Component:
    """
    渲染侧边栏图标导航按钮
    :param sidebar_icon_nav_button: 侧边栏图标导航按钮
    """
    # 指定侧边栏图标导航按钮的激活状态
    is_actived = sidebar_icon_nav_button == FrameState.sidebar_icon_nav_button

    return rx.box(
        # 渲染图标盒子
        rx.box(
            rx.image(
                src=sidebar_icon_nav_buttons[sidebar_icon_nav_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(
            sidebar_icon_nav_buttons[sidebar_icon_nav_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",  # 鼠标指针
    )


def render_sidebar() -> rx.Component:
    """
    渲染侧边栏
    """
    return rx.vstack(
        # 渲染顶部
        rx.vstack(
            # 渲染品牌 LOGO 和名称
            rx.vstack(
                # 渲染品牌 Logo
                render_brand_logo(),
                # 渲染品牌名称
                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_sidebar_icon_nav_button(sidebar_icon_nav_button="conversation"),
            # 渲染侧边栏图标导航按钮：知识库
            render_sidebar_icon_nav_button(sidebar_icon_nav_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",  # 盒模型
    )