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

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from './field';
import { Input } from '../input/input';
import { Switch } from '../switch/switch';

const meta = {
  title: 'Components/Field',
  component: Field,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Layout for a control and its supporting text, without a form library. Use the `form` subpath instead when you are on react-hook-form — that version also derives `aria-invalid` and `aria-describedby` from validation state. Here you own the wiring: give the control an `id` and point `FieldLabel` at it.',
      },
    },
  },
  tags: ['autodocs'],
  decorators: [(Story) => <div className="w-80"><Story /></div>],
} satisfies Meta<typeof Field>;

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

export const Default: Story = {
  render: () => (
    <Field>
      <FieldLabel htmlFor="field-email">Email</FieldLabel>
      <Input id="field-email" type="email" aria-describedby="field-email-hint" />
      <FieldDescription id="field-email-hint">We never share it.</FieldDescription>
    </Field>
  ),
};

export const Invalid: Story = {
  render: () => (
    <Field invalid>
      <FieldLabel htmlFor="field-name">Display name</FieldLabel>
      <Input id="field-name" aria-invalid defaultValue="a" />
      <FieldError>Must be at least three characters.</FieldError>
    </Field>
  ),
};

/** Horizontal orientation suits controls that read as a single line. */
export const Horizontal: Story = {
  render: () => (
    <Field orientation="horizontal">
      <FieldLabel htmlFor="field-beta">Join the beta programme</FieldLabel>
      <Switch id="field-beta" />
    </Field>
  ),
};

export const Grouped: Story = {
  render: () => (
    <FieldSet>
      <FieldLegend>Contact details</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="grp-first">First name</FieldLabel>
          <Input id="grp-first" />
        </Field>
        <Field>
          <FieldLabel htmlFor="grp-last">Last name</FieldLabel>
          <Input id="grp-last" />
        </Field>
      </FieldGroup>
    </FieldSet>
  ),
};

/**
 * CBAR's `.isRequired?` slot. The asterisk is `aria-hidden` — it draws, it does
 * not announce. Set `required` on the control as well so assistive technology
 * hears it from the place it already looks.
 */
export const Required: Story = {
  render: () => (
    <Field className="w-72">
      <FieldLabel htmlFor="req-email" required>
        Email
      </FieldLabel>
      <Input id="req-email" required placeholder="you@example.com" />
      <FieldDescription>We only use it to send the receipt.</FieldDescription>
    </Field>
  ),
};