import type { Meta, StoryObj } from '@storybook/react';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
  SelectSeparator,
} from './select';
import React from 'react';
import { Label } from '../label';

const meta: Meta<typeof Select> = {
  title: 'UI/Select',
  component: Select,
  render: args => <Select {...args} />,
  argTypes: {
    disabled: {
      control: 'boolean',
      description: 'Whether the select is disabled.',
    },
    required: {
      control: 'boolean',
      description: 'Whether the select is required.',
    },
    size: {
      control: 'select',
      options: ['sm', 'md', 'lg'],
      description: 'Size of the SelectTrigger.',
      defaultValue: 'md',
      table: { category: 'SelectTrigger' },
    },
  } as any,
};

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

export const Default: Story = {
  args: { size: 'md' } as any,
  render: ({ size, ...args }: any) => (
    <div className="flex flex-col gap-2">
      <Label id="fruit-label">Fruta</Label>
      <Select {...args} name="fruit">
        <SelectTrigger size={size} className="w-[180px]" aria-labelledby="fruit-label">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes">Grapes</SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  ),
};

export const Grouped: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-[280px]" aria-label="Selecionar fuso horário">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>North America</SelectLabel>
          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
          <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
          <SelectItem value="hst">Hawaii-Aleutian Standard Time (HST)</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Europe & Africa</SelectLabel>
          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
          <SelectItem value="cet">Central European Time (CET)</SelectItem>
          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
          <SelectItem value="west">Western European Summer Summer Time (WEST)</SelectItem>
          <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
          <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  ),
};

export const Disabled: Story = {
  render: () => (
    <Select disabled>
      <SelectTrigger className="w-[180px]" aria-label="Selecionar um tema">
        <SelectValue placeholder="Select a theme..." />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="light">Light</SelectItem>
        <SelectItem value="dark">Dark</SelectItem>
        <SelectItem value="system">System</SelectItem>
      </SelectContent>
    </Select>
  ),
};

/**
 * Size comparison: sm, md (default), lg.
 */
export const Sizes: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <div className="grid gap-1.5">
        <Label id="select-sm-label" size="sm">
          Small (sm)
        </Label>
        <Select>
          <SelectTrigger size="sm" className="w-[180px]" aria-labelledby="select-sm-label">
            <SelectValue placeholder="Small select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">Option 1</SelectItem>
            <SelectItem value="2">Option 2</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-1.5">
        <Label id="select-md-label" size="md">
          Medium (md — default)
        </Label>
        <Select>
          <SelectTrigger size="md" className="w-[180px]" aria-labelledby="select-md-label">
            <SelectValue placeholder="Medium select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">Option 1</SelectItem>
            <SelectItem value="2">Option 2</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="grid gap-1.5">
        <Label id="select-lg-label" size="lg">
          Large (lg)
        </Label>
        <Select>
          <SelectTrigger size="lg" className="w-[180px]" aria-labelledby="select-lg-label">
            <SelectValue placeholder="Large select" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="1">Option 1</SelectItem>
            <SelectItem value="2">Option 2</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  ),
};