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

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from './select';
import { Label } from '../label/label';

const meta = {
  title: 'Components/Select',
  component: Select,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          'Choose one value from a list, with type-ahead and full keyboard support. Reach for Combobox once the list is long enough to need filtering, and DropdownMenu when the items are actions rather than values.',
      },
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof Select>;

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

export const Default: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-56">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="utc">UTC</SelectItem>
        <SelectItem value="cet">Central European Time</SelectItem>
        <SelectItem value="est">Eastern Standard Time</SelectItem>
        <SelectItem value="pst">Pacific Standard Time</SelectItem>
      </SelectContent>
    </Select>
  ),
};

export const Grouped: Story = {
  render: () => (
    <div className="grid w-56 gap-2">
      <Label htmlFor="fruit">Favourite produce</Label>
      <Select>
        <SelectTrigger id="fruit">
          <SelectValue placeholder="Pick one" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruit</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="fig">Fig</SelectItem>
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Vegetables</SelectLabel>
            <SelectItem value="carrot">Carrot</SelectItem>
            <SelectItem value="leek" disabled>
              Leek (out of stock)
            </SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div className="flex items-start gap-3">
      <Select defaultValue="sm">
        <SelectTrigger size="sm" className="w-32">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="sm">Small</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="md">
        <SelectTrigger size="md" className="w-32">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="md">Medium</SelectItem>
        </SelectContent>
      </Select>
    </div>
  ),
};

export const Invalid: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-56" aria-invalid>
        <SelectValue placeholder="Required" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="a">Option A</SelectItem>
        <SelectItem value="b">Option B</SelectItem>
      </SelectContent>
    </Select>
  ),
};

/**
 * CBAR's `.isClearable?` slot. The reset control is a sibling of the trigger,
 * layered over it — `SelectPrimitive.Trigger` is a real `<button>`, and nesting
 * one button inside another is invalid HTML.
 *
 * Clearing sets the value to `''`, which is how Radix returns to the
 * placeholder. That is also why no item may use `''` as its own value.
 */
export const Clearable: Story = {
  render: () => (
    <Select defaultValue="baku">
      <SelectTrigger clearable className="w-56">
        <SelectValue placeholder="Pick a city" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="baku">Baku</SelectItem>
        <SelectItem value="ganja">Ganja</SelectItem>
        <SelectItem value="sumqayit">Sumqayit</SelectItem>
      </SelectContent>
    </Select>
  ),
};