import { useForm } from 'react-hook-form';
import { Button } from '@/components/button';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/form';
import { Input } from '@/components/input';
import type { Entry } from './types';

/** `displayName` for `chrome/lib/codegen.ts` — see `ControlledSortDemo` in `./data`. */
function ProfileForm() {
  const form = useForm<{ username: string; website: string }>({
    defaultValues: { username: '', website: '' },
    mode: 'onSubmit',
  });

  return (
    <Form {...form}>
      <form
        className="w-80 space-y-4"
        onSubmit={form.handleSubmit(() => {
          /* Nothing to submit to — the point is the validation display. */
        })}
      >
        <FormField
          control={form.control}
          name="username"
          rules={{ required: 'A username is required.', minLength: { value: 3, message: 'At least 3 characters.' } }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="cavid" {...field} />
              </FormControl>
              <FormDescription>Shown next to everything you publish.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="website"
          rules={{ pattern: { value: /^https?:\/\//, message: 'Must start with http:// or https://' } }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Website</FormLabel>
              <FormControl>
                <Input placeholder="https://example.com" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit empty to see the errors</Button>
      </form>
    </Form>
  );
}
ProfileForm.displayName = 'ProfileForm';

export const form: Entry = {
  slug: 'form',
  name: 'Form',
  group: 'Forms',
  description:
    'react-hook-form bound to the kit’s field anatomy: FormControl wires id, aria-describedby and aria-invalid from the field state, so an error is announced rather than only coloured. It is deliberately absent from the root barrel — react-hook-form is an *optional* peer dependency, and re-exporting it would break every consumer that has not installed it. Import it only at the subpath.',
  imports: { subpath: 'form', names: ['Form', 'FormField', 'FormItem'] },

  compositions: [
    {
      name: 'Validated fields',
      description: 'Submit with the fields empty to see FormMessage take over from FormDescription.',
      render: () => <ProfileForm />,
    },
  ],
};