import { zodResolver } from '@hookform/resolvers/zod';
import { FormationsSchema, type Formations } from '../../../content/schemas/formations';
import { FormShell } from '../FormShell';
import { Section } from '../Section';
import { TextField } from '../fields/TextField';
import { TextAreaField } from '../fields/TextAreaField';
import { ArrayEditor } from '../fields/ArrayEditor';

type Props = { defaultValues: Formations };

export function FormationsForm({ defaultValues }: Props) {
  return (
    <FormShell<Formations>
      section="formations"
      defaultValues={defaultValues as never}
      resolver={zodResolver(FormationsSchema) as never}
    >
      <Section title="Formations" subtitle="// edu system">
        <ArrayEditor
          name="items"
          label="Cursus"
          newItem={() =>
            ({
              id: '',
              title: '',
              school: '',
              period: '',
            }) as never
          }
          itemLabel={(i) => `ticket #${String(i + 1).padStart(3, '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}.period`} label="Période" placeholder="2018 — 2020" />
              </div>
              <TextField name={`${namePrefix}.title`} label="Titre / diplôme" />
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <TextField name={`${namePrefix}.school`} label="École" />
                <TextField
                  name={`${namePrefix}.schoolUrl`}
                  label="Site école"
                  type="url"
                  placeholder="https://…"
                />
              </div>
              <TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
            </>
          )}
        </ArrayEditor>
      </Section>
    </FormShell>
  );
}
