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

import { RadioGroup, RadioGroupItem } from './radio-group';
import { Label } from '../label/label';

const meta = {
  title: 'Components/RadioGroup',
  component: RadioGroup,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Mutually exclusive choice. Arrow keys move between options and only one stop appears in the tab order — that is the behaviour that makes it a radio group rather than a row of checkboxes.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof RadioGroup>;

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

/**
 * CBAR marks the selected option by swelling the border until the untouched
 * centre becomes the dot, rather than drawing a dot inside a ring.
 */
export const Sizes: Story = {
  render: () => (
    <RadioGroup defaultValue="md" className="flex items-center gap-4">
      {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
        <RadioGroupItem key={size} size={size} value={size} aria-label={size} />
      ))}
    </RadioGroup>
  ),
};

export const Palettes: Story = {
  render: () => (
    <RadioGroup defaultValue="primary" className="flex items-center gap-4">
      {(['primary', 'secondary', 'tertiary', 'black', 'red', 'green'] as const).map((palette) => (
        <RadioGroupItem
          key={palette}
          colorPalette={palette}
          value={palette}
          aria-label={palette}
        />
      ))}
    </RadioGroup>
  ),
};

export const Default: Story = {
  render: () => (
    <RadioGroup defaultValue="comfortable">
      {[
        ['default', 'Default'],
        ['comfortable', 'Comfortable'],
        ['compact', 'Compact'],
      ].map(([value, label]) => (
        <div key={value} className="flex items-center gap-2">
          <RadioGroupItem value={value} id={value} />
          <Label htmlFor={value}>{label}</Label>
        </div>
      ))}
    </RadioGroup>
  ),
};

export const WithDisabledOption: Story = {
  render: () => (
    <RadioGroup defaultValue="standard">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="standard" id="standard" />
        <Label htmlFor="standard">Standard delivery</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="express" id="express" />
        <Label htmlFor="express">Express delivery</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="same-day" id="same-day" disabled />
        <Label htmlFor="same-day">Same day (unavailable in your area)</Label>
      </div>
    </RadioGroup>
  ),
};

export const Horizontal: Story = {
  render: () => (
    <RadioGroup defaultValue="yes" className="flex gap-6">
      <div className="flex items-center gap-2">
        <RadioGroupItem value="yes" id="yes" />
        <Label htmlFor="yes">Yes</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="no" id="no" />
        <Label htmlFor="no">No</Label>
      </div>
    </RadioGroup>
  ),
};