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

import { Button } from '.';

const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    variant: {
      defaultValue: 'default',
    },
    intent: {
      defaultValue: 'default',
    },
    size: {
      defaultValue: 'sm',
    },
  },
};

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

const variants = ['default', 'elevate'] as const;
const intent = ['default', 'action', 'danger'] as const;
const sizes = ['xs', 'sm', 'md', 'lg'] as const;

export const AllButton: Story = {
  name: 'All Buttons',
  render: () => {
    return (
      <div>
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
            gap: '1.5rem',
            justifyItems: 'center',
          }}
        >
          {sizes.map(size =>
            variants.map(variant =>
              intent.map(intent => (
                <Button variant={variant} size={size} intent={intent} status="loading">
                  Button
                </Button>
              )),
            ),
          )}
        </div>
      </div>
    );
  },
};

export const Default: Story = {
  args: {
    intent: 'default',
    variant: 'default',
    children: 'Button',
  },
};

export const Elevate: Story = {
  args: {
    intent: 'default',
    variant: 'elevate',
    children: 'Button',
  },
};

export const Action: Story = {
  args: {
    intent: 'action',
    variant: 'default',
    children: 'Button',
  },
};

export const Danger: Story = {
  args: {
    intent: 'danger',
    variant: 'default',
    children: 'Button',
  },
};

export const Prepend: Story = {
  args: {
    intent: 'default',
    variant: 'default',
    children: 'Button',
    prepend: '🤓',
  },
};

export const Append: Story = {
  args: {
    intent: 'default',
    variant: 'default',
    children: 'Button',
    append: '🤓',
  },
};

export const IsLoading: Story = {
  args: {
    intent: 'default',
    variant: 'default',
    children: 'Button',
    status: 'loading',
  },
};
