import gradio as gr
import modelscope_studio.components.antd as antd
import modelscope_studio.components.base as ms

from config import *


def SettingsMenu():
    state = gr.State({"open": True})

    # Use a Card or just a Flex container for the sidebar
    with antd.Card(title="Settings", size="small", bordered=True):
        with antd.Form(value=DEFAULT_SETTINGS) as settings_form:
            with antd.Form.Item(form_name="model", label="Model"):
                with antd.Select(options=MODEL_OPTIONS):
                    with ms.Slot(
                        "labelRender",
                        params_mapping="""(option) => ({
                                label: option.label,
                                link: { href: window.MODEL_OPTIONS_MAP[option.value].link },
                            })""",
                    ):
                        antd.Typography.Text(as_item="label")

            with antd.Form.Item(
                form_name="temperature",
                label="Temperature",
                elem_classes="setting-form-temperature",
            ):
                antd.Slider(
                    elem_style=dict(flex=1, marginRight=14),
                    min=MIN_TEMPERATURE,
                    max=MAX_TEMPERATURE,
                    step=0.05,
                    tooltip=dict(formatter="(v) => `${v}`"),
                )
                antd.InputNumber(
                    max=MAX_TEMPERATURE,
                    min=MIN_TEMPERATURE,
                    step=0.05,
                    elem_style=dict(width=65),
                )

            with antd.Form.Item(
                form_name="max_new_tokens",
                label="Max new tokens",
                elem_classes="setting-form-max-new-tokens",
            ):
                antd.Slider(
                    elem_style=dict(flex=1, marginRight=14),
                    min=MIN_MAX_NEW_TOKENS,
                    max=MAX_MAX_NEW_TOKENS,
                    step=64,
                    tooltip=dict(formatter="(v) => `${v}`"),
                )
                antd.InputNumber(
                    max=MAX_MAX_NEW_TOKENS,
                    min=MIN_MAX_NEW_TOKENS,
                    step=64,
                    elem_style=dict(width=85),
                )

            with antd.Form.Item(
                form_name="top_p",
                label="Top_p",
                elem_classes="setting-form-top-p",
            ):
                antd.Slider(
                    elem_style=dict(flex=1, marginRight=14),
                    min=MIN_TOP_P,
                    max=MAX_TOP_P,
                    step=0.05,
                    tooltip=dict(formatter="(v) => `${v}`"),
                )
                antd.InputNumber(
                    max=MAX_TOP_P, min=MIN_TOP_P, step=0.05, elem_style=dict(width=65)
                )

    return state, settings_form