import { zodResolver } from '@hookform/resolvers/zod';
import { InterestsSchema, type Interests } from '../../../content/schemas/interests';
import { FormShell } from '../FormShell';
import { Section } from '../Section';
import { TextField } from '../fields/TextField';
import { SelectField } from '../fields/SelectField';
import { EmojiField } from '../fields/EmojiField';
import { ArrayEditor } from '../fields/ArrayEditor';

type Props = { defaultValues: Interests };

const COLOR_OPTIONS = [
  { value: 'cyan', label: '◉ cyan' },
  { value: 'magenta', label: '◉ magenta' },
  { value: 'violet', label: '◉ violet' },
  { value: 'ice', label: '◉ ice' },
];

export function InterestsForm({ defaultValues }: Props) {
  return (
    <FormShell<Interests>
      section="interests"
      defaultValues={defaultValues as never}
      resolver={zodResolver(InterestsSchema) as never}
    >
      <Section title="Centres d'intérêt" subtitle="// off decks">
        <ArrayEditor
          name="items"
          label="Items"
          newItem={() =>
            ({ id: '', label: '', icon: '🎧', color: 'cyan' as const }) as never
          }
          itemLabel={(i) => `pad #${String(i + 1).padStart(2, '0')}`}
        >
          {({ namePrefix }) => (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
                <TextField name={`${namePrefix}.label`} label="Label" />
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <EmojiField name={`${namePrefix}.icon`} label="Icône" />
                <SelectField name={`${namePrefix}.color`} label="Couleur" options={COLOR_OPTIONS} />
              </div>
            </>
          )}
        </ArrayEditor>
      </Section>
    </FormShell>
  );
}