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

import { Button } from './button';

const meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    docs: {
      description: {
        component:
          "The kit's primary interactive control. Following CBAR's design system, colour and treatment are separate axes: `variant` says how filled in the button is, `colorPalette` says which hue it wears. Any of the five treatments combines with any of the seven palettes.",
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: [
        'solid',
        'subtle',
        'surface',
        'outline',
        'ghost',
        'link',
        'default',
        'destructive',
        'secondary',
      ],
    },
    colorPalette: {
      control: 'select',
      options: ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'],
    },
    size: {
      control: 'select',
      options: ['xs', 'sm', 'md', 'lg', 'xl', 'icon-xs', 'icon-sm', 'icon', 'icon-lg'],
    },
    disabled: { control: 'boolean' },
  },
  args: { children: 'Button' },
} satisfies Meta<typeof Button>;

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

export const Default: Story = {};

const VARIANTS = ['solid', 'subtle', 'surface', 'outline', 'ghost', 'link'] as const;
const PALETTES = ['primary', 'secondary', 'tertiary', 'black', 'red', 'green', 'yellow'] as const;

export const Variants: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      {VARIANTS.map((variant) => (
        <Button key={variant} variant={variant}>
          {variant}
        </Button>
      ))}
    </div>
  ),
};

/** The other axis: every treatment above renders in any of these seven hues. */
export const Palettes: Story = {
  render: () => (
    <div className="flex flex-col gap-3">
      {VARIANTS.filter((v) => v !== 'link').map((variant) => (
        <div key={variant} className="flex flex-wrap items-center gap-3">
          {PALETTES.map((colorPalette) => (
            <Button key={colorPalette} variant={variant} colorPalette={colorPalette}>
              {colorPalette}
            </Button>
          ))}
        </div>
      ))}
    </div>
  ),
};

/**
 * One-word shorthands for the combinations used most often. Each pins its own
 * colour, so `colorPalette` has no effect alongside them — reach for
 * `variant="solid"` plus a palette when you want the two axes to compose.
 */
export const Shorthands: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
    </div>
  ),
};

export const Sizes: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra large</Button>
    </div>
  ),
};

/** Square buttons for a lone icon. Each one needs an `aria-label`. */
export const IconOnly: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      {(['icon-xs', 'icon-sm', 'icon', 'icon-lg'] as const).map((size) => (
        <Button key={size} size={size} aria-label={`Add item (${size})`}>
          <Plus />
        </Button>
      ))}
    </div>
  ),
};

export const WithIcons: Story = {
  render: () => (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <Plus />
        New project
      </Button>
      <Button variant="outline">
        Continue
        <ArrowRight />
      </Button>
      <Button colorPalette="red">
        <Trash2 />
        Delete
      </Button>
    </div>
  ),
};

export const Disabled: Story = {
  args: { disabled: true },
  render: (args) => (
    <div className="flex flex-wrap items-center gap-3">
      <Button {...args}>Default</Button>
      <Button {...args} variant="outline">
        Outline
      </Button>
      <Button {...args} variant="ghost">
        Ghost
      </Button>
    </div>
  ),
};

/**
 * `asChild` hands the button's styling to whatever element you nest, so a
 * router link can look like a button without an invalid `<a>` inside `<button>`.
 */
export const AsChild: Story = {
  render: () => (
    <Button asChild>
      <a href="https://ui.shadcn.com" target="_blank" rel="noreferrer">
        Open docs
        <ArrowRight />
      </a>
    </Button>
  ),
};