'use client';

import Form, { FormItem } from '@/components/ui/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';

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(() => {
  const options = [
    {
      label: 'Model 1',
      value: 'model1',
    },
    {
      label: 'Model 2',
      value: 'model2',
    },
    {
      label: 'Model 3',
      value: 'model3',
    },
    {
      label: 'Model 4',
      value: 'model4',
    },
  ];

  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>
          <Title text="Switch Model">
            <FormItem
              name="name"
              render={({ value, onChange }) => (
                <ModelSelectDialog value={value} onChange={onChange} />
              )}
            />
            <FormItem
              name="name1"
              render={({ value, onChange }) => (
                <Switch
                  icon={'/character/model_long_text.svg'}
                  text="Short Text Mode"
                  value={value}
                  onChange={onChange}
                />
              )}
            />
          </Title>

          <Title text="Sound">
            <FormItem
              name="name12"
              render={({ value, onChange }) => <VoiceActorSelectDialog />}
            />
            <FormItem
              name="name12"
              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
              name="name13"
              render={({ value, onChange }) => (
                <Number value={value} onChange={onChange} />
              )}
            />
          </Title>

          <Title text="Appearance">
            <FormItem
              name="fontSize"
              render={() => {
                return <FontSize />;
              }}
            />
            <FormItem
              name="name12"
              render={({ value, onChange }) => (
                <Select
                  placeholder="Chat Mode"
                  icon={'/character/chat_mode.svg'}
                  options={[
                    { label: 'Chat Mode', value: 'chat_mode' },
                    { label: 'Chat Bubble', value: 'chat_bubble' },
                  ]}
                />
              )}
            />
            <FormItem
              name="name12"
              render={({ value, onChange }) => <BubbleSelectDialog />}
            />
          </Title>

          <Title text="Background">
            <FormItem
              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;