import type { Meta, StoryObj } from '@storybook/react-vite';
import { useForm } from 'react-hook-form';

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from './form';
import { Button } from '../button/button';
import { Input } from '../input/input';
import { Switch } from '../switch/switch';
import { toast } from '../toast/toast';

const meta = {
  title: 'Components/Form',
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          '`react-hook-form` bindings. It is an **optional peer dependency** — install it in your app if you import this subpath; the rest of the kit works without it. The value here is the wiring: `FormControl` links the input to its label, hint and error through `aria-describedby` and sets `aria-invalid`, so validation is announced rather than only shown.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta;

export default meta;
type Story = StoryObj<typeof meta>;

type Values = {
  username: string;
  email: string;
  newsletter: boolean;
};

export const Default: Story = {
  render: function FormStory() {
    const form = useForm<Values>({
      defaultValues: { username: '', email: '', newsletter: true },
      mode: 'onBlur',
    });

    return (
      <Form {...form}>
        <form
          className="w-80 space-y-6"
          onSubmit={form.handleSubmit((values) =>
            toast.success('Submitted', { description: JSON.stringify(values) })
          )}
        >
          <FormField
            control={form.control}
            name="username"
            rules={{
              required: 'A username is required.',
              minLength: { value: 3, message: 'At least three characters.' },
            }}
            render={({ field }) => (
              <FormItem>
                <FormLabel>Username</FormLabel>
                <FormControl>
                  <Input placeholder="ada" {...field} />
                </FormControl>
                <FormDescription>This is your public display name.</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            rules={{
              required: 'An email is required.',
              pattern: { value: /^\S+@\S+\.\S+$/, message: 'That does not look like an email.' },
            }}
            render={({ field }) => (
              <FormItem>
                <FormLabel>Email</FormLabel>
                <FormControl>
                  <Input type="email" placeholder="name@example.com" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="newsletter"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center justify-between gap-4">
                <div className="grid gap-1">
                  <FormLabel>Product updates</FormLabel>
                  <FormDescription>About one email a month.</FormDescription>
                </div>
                <FormControl>
                  <Switch checked={field.value} onCheckedChange={field.onChange} />
                </FormControl>
              </FormItem>
            )}
          />

          <Button type="submit">Create account</Button>
        </form>
      </Form>
    );
  },
};