import { zodResolver } from '@hookform/resolvers/zod';
import { ExperiencesSchema, type Experiences } from '../../../content/schemas/experiences';
import { FormShell } from '../FormShell';
import { Section } from '../Section';
import { TextField } from '../fields/TextField';
import { TextAreaField } from '../fields/TextAreaField';
import { SelectField } from '../fields/SelectField';
import { ToggleField } from '../fields/ToggleField';
import { ChipsField } from '../fields/ChipsField';
import { ImageUploadField } from '../fields/ImageUploadField';
import { ArrayEditor } from '../fields/ArrayEditor';

type Props = { defaultValues: Experiences };

const TYPE_OPTIONS = [
  { value: 'cdi', label: 'CDI' },
  { value: 'cdd', label: 'CDD' },
  { value: 'stage', label: 'Stage' },
  { value: 'alternance', label: 'Alternance' },
  { value: 'freelance', label: 'Freelance' },
];

export function ExperiencesForm({ defaultValues }: Props) {
  return (
    <FormShell<Experiences>
      section="experiences"
      defaultValues={defaultValues as never}
      resolver={zodResolver(ExperiencesSchema) as never}
    >
      <Section title="Expériences" subtitle="// setlist">
        <ArrayEditor
          name="items"
          label="Postes"
          newItem={() =>
            ({
              id: '',
              company: '',
              role: '',
              period: '',
              duration: '',
              description: '',
              missions: [],
              stack: [],
              type: 'cdi' as const,
              current: false,
            }) as never
          }
          itemLabel={(i) => `track #${String(i + 1).padStart(2, '0')}`}
        >
          {({ namePrefix }) => (
            <>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
                <TextField name={`${namePrefix}.company`} label="Entreprise" />
                <TextField name={`${namePrefix}.role`} label="Rôle" />
              </div>
              <ImageUploadField name={`${namePrefix}.logo`} label="Logo" folder="company" />
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
                <TextField name={`${namePrefix}.period`} label="Période" placeholder="Janv 2020 — Now" />
                <TextField name={`${namePrefix}.duration`} label="Durée" placeholder="4 ans" />
                <SelectField name={`${namePrefix}.type`} label="Type" options={TYPE_OPTIONS} />
              </div>
              <TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
              <ChipsField name={`${namePrefix}.missions`} label="Missions" hint="Une par chip" />
              <ChipsField name={`${namePrefix}.stack`} label="Stack" hint="Technos utilisées" />
              <ToggleField name={`${namePrefix}.current`} label="Poste en cours (NOW PLAYING)" />
            </>
          )}
        </ArrayEditor>
      </Section>

      <Section title="Compétences globales" subtitle="// patch bay">
        <ChipsField name="skills.technical" label="Techniques" />
        <ChipsField name="skills.soft" label="Transverses / soft" />
      </Section>
    </FormShell>
  );
}