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

import { Input } from './input';
import { Label } from '../label/label';
import { SearchIcon } from '@/icons';

const meta = {
  title: 'Components/Input',
  component: Input,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Single-line text field. The error treatment is driven by `aria-invalid`, so what is shown always matches what assistive technology reports.',
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'inline-radio', options: ['xs', 'sm', 'md', 'lg'] },
    variant: { control: 'inline-radio', options: ['outline', 'flushed'] },
  },
  args: { placeholder: 'name@example.com' },
  decorators: [(Story) => <div className="w-72"><Story /></div>],
} satisfies Meta<typeof Input>;

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

export const Sizes: Story = {
  render: (args) => (
    <div className="flex flex-col gap-3">
      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
        <Input key={size} {...args} size={size} placeholder={size} />
      ))}
    </div>
  ),
};

/** CBAR's second treatment: underlined only, for dense forms and inline edits. */
export const Flushed: Story = {
  args: { variant: 'flushed' },
};

export const Default: Story = {};

export const WithLabel: Story = {
  render: (args) => (
    <div className="grid gap-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" {...args} />
    </div>
  ),
};

export const Types: Story = {
  render: () => (
    <div className="grid gap-3">
      <Input type="text" placeholder="Text" />
      <Input type="password" placeholder="Password" defaultValue="hunter2" />
      <Input type="number" placeholder="Number" />
      <Input type="date" />
      <Input type="file" />
    </div>
  ),
};

export const Invalid: Story = {
  args: { 'aria-invalid': true, defaultValue: 'not-an-email' },
};

export const Disabled: Story = {
  args: { disabled: true, defaultValue: 'Read only' },
};

/**
 * CBAR's Input set draws `.leftElement?` and `.rightElement?`, both on by
 * default. `startElement` is inert so a click reaches the field; `endElement`
 * stays interactive, which is where a clear button or a unit toggle belongs.
 */
export const Adornments: Story = {
  render: () => (
    <div className="flex w-64 flex-col gap-3">
      <Input startElement={<SearchIcon />} placeholder="Search" />
      <Input endElement={<span className="text-sm">₼</span>} defaultValue="1200" />
      <Input
        startElement={<SearchIcon />}
        endElement={<span className="text-xs">⌘K</span>}
        placeholder="Both"
      />
      <Input startElement={<SearchIcon />} placeholder="Disabled" disabled />
      <Input startElement={<SearchIcon />} defaultValue="nope" aria-invalid />
    </div>
  ),
};

/** The adornment box follows the same 32 / 36 / 44 / 56px ladder. */
export const AdornmentSizes: Story = {
  render: () => (
    <div className="flex w-64 flex-col gap-3">
      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
        <Input key={size} size={size} startElement={<SearchIcon />} placeholder={size} />
      ))}
    </div>
  ),
};