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

import { IconPlus } from '@tabler/icons-react';

import { type ComponentMatrixCellProps, Story } from './_internal/Story';
import { Button, type ButtonProps } from './Button';

const meta = {
  component: Button,
  parameters: {
    layout: 'fullscreen',
  },
  title: 'components/Button',
} satisfies Meta<typeof Button>;

export default meta;
type ButtonVariant = NonNullable<ButtonProps['variant']>;
type StoryDefinition = StoryObj<typeof meta>;

const STATE_COLUMNS: {
  key: string;
  label: string;
  props: Partial<ButtonProps>;
}[] = [
  { key: 'default', label: 'Default', props: {} },
  { key: 'hover', label: 'Hover', props: { className: 'pseudo-hover' } },
  {
    key: 'focus',
    label: 'Focus',
    props: { className: 'pseudo-focus-visible' },
  },
  { key: 'active', label: 'Active', props: { className: 'pseudo-active' } },
  { key: 'disabled', label: 'Disabled', props: { disabled: true } },
  { key: 'loading', label: 'Loading', props: { loading: true } },
];

const STATE_PROPS = Object.fromEntries(
  STATE_COLUMNS.map((state) => [state.key, state.props]),
) as Record<string, Partial<ButtonProps>>;

const VARIANT_ROWS: {
  key: ButtonVariant;
  label: string;
}[] = [
  { key: 'default', label: 'Default' },
  { key: 'secondary', label: 'Secondary' },
  { key: 'destructive', label: 'Destructive' },
  { key: 'destructive-outline', label: 'Destructive outline' },
  { key: 'outline', label: 'Outline' },
  { key: 'ghost', label: 'Ghost' },
  { key: 'link', label: 'Link' },
];

const SIZE_COLUMNS = [
  { description: 'h-7', key: 'xs', label: 'Extra small' },
  { description: 'h-8', key: 'sm', label: 'Small' },
  { description: 'h-8', key: 'md', label: 'Medium' },
  { description: 'h-9', key: 'lg', label: 'Large' },
  { description: 'h-10', key: 'xl', label: 'Extra large' },
];

const CONTENT_ROWS = [
  { key: 'text', label: 'Text' },
  { key: 'with-icon', label: 'Icon and text' },
  {
    description: 'Use size="icon" with aria-label',
    key: 'icon',
    label: 'Icon only',
  },
];

type ButtonSize = NonNullable<ButtonProps['size']>;

function ButtonContentCell({ column, row }: ComponentMatrixCellProps) {
  const variant = column.key as ButtonVariant;

  if (row.key === 'icon') {
    return (
      <Button aria-label="Add" size="icon" variant={variant}>
        <IconPlus aria-hidden="true" stroke={2} />
      </Button>
    );
  }

  return (
    <Button variant={variant}>
      {row.key === 'with-icon' ? (
        <IconPlus aria-hidden="true" stroke={2} />
      ) : null}
      Add
    </Button>
  );
}

function ButtonSizeCell({ column, row }: ComponentMatrixCellProps) {
  const size = column.key as ButtonSize;

  if (row.key === 'icon') {
    return (
      <Button aria-label="Add" size="icon">
        <IconPlus aria-hidden="true" stroke={2} />
      </Button>
    );
  }

  return (
    <Button size={size}>
      {row.key === 'with-icon' ? (
        <IconPlus aria-hidden="true" stroke={2} />
      ) : null}
      Add
    </Button>
  );
}

function ButtonStateCell({ column, row }: ComponentMatrixCellProps) {
  return (
    <Button variant={row.key as ButtonVariant} {...STATE_PROPS[column.key]}>
      Button
    </Button>
  );
}

export const All: StoryDefinition = {
  render: () => (
    <Story.Layout className="max-w-6xl" title="Button">
      <Story.Section title="Variants and states">
        <Story.Matrix
          Cell={ButtonStateCell}
          columns={STATE_COLUMNS}
          rows={VARIANT_ROWS}
        />
      </Story.Section>

      <Story.Section title="Content patterns">
        <Story.Matrix
          Cell={ButtonContentCell}
          columns={[
            { key: 'default', label: 'Default' },
            { key: 'outline', label: 'Outline' },
            { key: 'ghost', label: 'Ghost' },
          ]}
          rows={CONTENT_ROWS}
        />
      </Story.Section>

      <Story.Section title="Sizes">
        <Story.Matrix
          Cell={ButtonSizeCell}
          columns={SIZE_COLUMNS}
          rows={CONTENT_ROWS}
        />
      </Story.Section>

      <Story.Section title="asChild composition">
        <div className="flex flex-wrap items-center gap-3">
          <Button asChild variant="outline">
            <a href="#docs">Documentation</a>
          </Button>
          <Button asChild>
            <a href="#signup">Create account</a>
          </Button>
          <Button asChild size="sm" variant="ghost">
            <a href="#settings">Settings</a>
          </Button>
        </div>
      </Story.Section>
    </Story.Layout>
  ),
};