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

import reflex as rx

from application.states import SidebarState

# 侧边栏图标导航按钮字典
buttons = {
    "conversation": {"src": "/conversation.svg", "text": "会话"},
    "library": {"src": "/library.svg", "text": "知识库"},
}


def sidebar() -> rx.Component:
    """
    侧边栏
    """

    def button(
        button: str,
    ) -> rx.Component:
        """
        侧边栏图标导航按钮
        :param button: 指定侧边栏图标导航按钮
        """
        # 指定按钮的激活状态
        is_actived = button == SidebarState.get_activated_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(--prismui-border-radius)",
                # 若激活则渲染背景颜色和阴影，否则不渲染
                style={
                    "background-color": rx.cond(
                        is_actived, "var(--prismui-background-color)", "transparent"
                    ),
                    "box-shadow": rx.cond(is_actived, "0 4px 12px #0000001a", "none"),
                },
            ),
            # 渲染标签
            rx.text(
                buttons[button]["text"],
                color="var(--prismui-color-text)",
                font_size="var(--prismui-font-size-sm)",
                line_height="20px",
            ),
            display="flex",
            flex_direction="column",
            align_items="center",
            gap="4px",
            cursor="pointer",
            # 点击事件：将指定图标导航按钮设置为侧边栏中激活的图标导航按钮
            on_click=SidebarState.switch_activated_button(button),
        )

    return rx.vstack(
        rx.vstack(
            rx.vstack(
                # 品牌图标
                rx.image(
                    src="/logo.png",
                    width="34px",
                    height="34px",
                    object_fit="contain",
                ),
                # 品牌名称
                rx.text(
                    "棱镜球",
                    line_height="20px",
                    font_size="11px",
                    font_weight="700",
                    color="var(--prismui-color-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="var(--prismui-background-color-weak)",
            ),
            # 渲染侧边栏中会话图标导航按钮
            button("conversation"),
            # 渲染侧边栏中知识库图标导航按钮
            button("library"),
            display="flex",
            flex_direction="column",
            align_items="center",
            width="100%",
            margin_top="12px",
        ),
        display="flex",
        flex_direction="column",
        justify_content="space-between",
        align_items="center",
        width="60px",
        height="100%",
        box_sizing="border-box",
    )