# -*- coding: utf-8 -*-
"""
会话组件
"""
import reflex
from reflex.constants.colors import ColorType

from ..state import State, Turn


def message_bubble(message: str, color: ColorType) -> reflex.Component:
    """
    对话组件中一个消息气泡组件
    :param message: 消息
    :param color: 颜色
    :return: Component
    """
    return reflex.markdown(
        message,
        color=reflex.color(color=color, shade=12),
        background_color=reflex.color(color=color, shade=4),
        display="inline-block",
        padding_inline="1em",
        border_radius="8px",
    )


def turn(turn: Turn) -> reflex.Component:
    """
    对话组件
    :param turn: 对话
    :return: Component
    """
    return reflex.box(
        reflex.box(
            message_bubble(message=turn.input_message, color="mauve"),
            text_align="right",
            margin_bottom="8px",
        ),
        reflex.box(
            message_bubble(message=turn.output_message, color="accent"),
            text_align="left",
            margin_bottom="8px",
        ),
        max_width="50em",
        margin_inline="auto",
    )


def session_area() -> reflex.Component:
    """
    会话区域组件
    :return: Component
    """
    return reflex.auto_scroll(
        reflex.foreach(State.get_current_session_turns, turn),
        flex="1",
        padding="8px",
        overflow_y="auto",
    )


def input_bar() -> reflex.Component:
    """
    输入栏组件
    """
    return reflex.center(
        reflex.vstack(
            reflex.form(
                reflex.hstack(
                    reflex.input(
                        name="input_message",
                        placeholder="请输入...",
                        flex="auto",
                    ),
                    reflex.button(
                        "发送",
                        type="submit",
                        loading=State.get_current_session_status,  # 正在处理中时按钮显示为 loading
                        disabled=State.get_current_session_status,  # 正在处理中时按钮禁用
                    ),
                    max_width="50em",
                    margin="0 auto",
                    align_items="center",
                ),
                on_submit=State.adapt_input_message,
                reset_on_submit=True,  # 提交后清空输入框
            ),
            reflex.text(
                "抹茶兔兔工作室",
                text_align="center",
                font_size=".75em",
                color=reflex.color("mauve", 10),
            ),
            width="100%",
            padding_x="16px",
            align="stretch",
        ),
        position="sticky",
        bottom="0",
        left="0",
        padding_y="16px",
        backdrop_filter="auto",
        backdrop_blur="lg",
        border_top=f"1px solid {reflex.color('mauve', 3)}",
        background_color=reflex.color("mauve", 2),
        align="stretch",
        width="100%",
    )