'use client';

import Form, { FormItem } from '@/components/ui/radix-form';
import React from 'react';
import { cn } from '@/lib';
import { Select, Switch, Number, FontSize } from '@/components/ui/inputs';
import Background from './Background';
import { AddIcon } from '@/assets/common';
import ModelSelectDialog from '@/components/feature/ModelSelectDialog';
import VoiceActorSelectDialog from '@/components/feature/VoiceActorSelectDialog';
import BubbleSelectDialog from '@/components/feature/BubbleSelectDialog';
import IconFont from '@/components/ui/iconFont';

// 表单数据类型定义
type SettingFormValues = {
  model?: string;
  short_text?: boolean;
  voiceActor?: string;
  dialogueOnly?: boolean;
  max_tokens?: number;
  fontSize?: number;
  chat_mode?: string;
  chat_bubble?: string;
  background?: string;
};

const Title: React.FC<
  {
    text?: string;
    children?: React.ReactNode;
  } & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
  const { text, children, ...rest } = props;
  return (
    <div className="mt-10 flex flex-col gap-2.5">
      <div {...rest} className={cn('font-bold', rest.className)}>
        {text}
      </div>
      {children}
    </div>
  );
};

const SettingForm = React.memo(() => {
  return (
    <div className="flex h-full flex-col">
      <div
        className="flex items-center text-lg font-black"
        style={{ height: 83 }}
      >
        Setting
      </div>
      <div className="flex-1 overflow-y-auto pr-10">
        <Form<SettingFormValues>
          onChange={(values) => {
            console.log(values);
          }}
        >
          <Title text="Switch Model">
            <FormItem<SettingFormValues>
              name="model"
              render={({ value, onChange }) => (
                <ModelSelectDialog value={value} onChange={onChange} />
              )}
            />
            <FormItem<SettingFormValues>
              name="short_text"
              render={({ value, onChange }) => (
                <Switch
                  icon={'/character/model_long_text.svg'}
                  text="Short Text Mode"
                  value={value}
                  onChange={onChange}
                />
              )}
            />
          </Title>

          <Title text="Sound">
            <FormItem<SettingFormValues>
              name="voiceActor"
              render={({ value, onChange }) => (
                <VoiceActorSelectDialog value={value} onChange={onChange} />
              )}
            />
            <FormItem<SettingFormValues>
              name="dialogueOnly"
              render={({ value, onChange }) => (
                <Switch
                  icon={'/character/play_dialogue_only.svg'}
                  text="Play dialogue only"
                  value={value}
                  onChange={onChange}
                />
              )}
            />
          </Title>

          <Title text="Maximum number of response tokens">
            <FormItem<SettingFormValues>
              name="max_tokens"
              render={({ value, onChange }) => (
                <Number value={value} onChange={onChange} />
              )}
            />
          </Title>

          <Title text="Appearance">
            <FormItem<SettingFormValues>
              name="fontSize"
              render={({ value, onChange }) => {
                return <FontSize value={value} onChange={onChange} />;
              }}
            />
            <FormItem<SettingFormValues>
              name="chat_mode"
              render={({ value, onChange }) => (
                <Select
                  value={value}
                  onChange={onChange}
                  placeholder="Chat Mode"
                  icon={'/character/chat_mode.svg'}
                  options={[
                    { label: 'Chat Mode', value: 'chat_mode' },
                    { label: 'Chat Bubble', value: 'chat_bubble' },
                  ]}
                />
              )}
            />
            {/* TODO: BubbleSelectDialog 需要支持受控模式 */}
            <div>
              <BubbleSelectDialog />
            </div>
          </Title>

          <Title text="Background">
            <FormItem<SettingFormValues>
              name="background"
              render={({ value, onChange }) => (
                <Background value={value} onChange={onChange} />
              )}
            />
          </Title>
        </Form>
        <div className="mt-12.5 mb-10 flex flex-col gap-5">
          <div className="tk-button border-1 border-[#E2503D] text-[rgba(255,59,48,1)] hover:bg-[rgba(255,59,48,0.1)]">
            <IconFont type="icon-delete" size={20} /> Delete
          </div>
          <div className="tk-button border-text-color/80 border-1 hover:bg-white hover:text-[rgba(0,102,255,1)]">
            <AddIcon /> START NEW CHAT
          </div>
        </div>
      </div>
    </div>
  );
});
export default SettingForm;