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

import { Stack } from '../../layout/stack';
import { FlexStack } from '../../layout/flex-stack';
import { Icon } from '../icon';
import { Button, BUTTON_SIZE, BUTTON_KIND } from '.';

const meta = {
  title: 'UI/Button',
  component: Button,
  args: {
    children: 'Action',
  },
} satisfies Meta<typeof Button>;

export default meta;

type Story = StoryObj<typeof meta>;

const Items = (props: React.ComponentProps<typeof FlexStack>) => (
  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
);

export const Default: Story = {};

export const All: Story = {
  render: () => (
    <Stack space="large">
      <Stack space="medium">
        <h2>Size</h2>
        <Items>
          {Object.values(BUTTON_SIZE).map((size) => (
            <Button size={size} key={size}>
              Action {size}
            </Button>
          ))}
        </Items>
      </Stack>
      <Stack space="medium">
        <h2>Kind</h2>
        <Stack space="medium">
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button kind={kind} key={kind}>
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>Active</h3>
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button kind={kind} key={kind} active>
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>As link</h3>
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button kind={kind} key={kind} as="a" href="#">
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>With icon</h3>
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
                Action {kind}
              </Button>
            ))}
          </Items>
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button rightGlyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} kind={kind} key={kind}>
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>Disabled</h3>
          <Items>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button kind={kind} key={kind} disabled>
                Action {kind}
              </Button>
            ))}
          </Items>
        </Stack>
      </Stack>
      <Stack space="medium">
        <h2>Outline &amp; Kind</h2>
        <Stack space="medium">
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button outline size={size}>
                Action default
              </Button>
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button outline kind={kind} key={kind} size={size}>
                  Action {kind}
                </Button>
              ))}
            </Items>
          ))}
          <h3>Active</h3>
          <Items>
            <Button outline active>
              Action default
            </Button>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button outline kind={kind} key={kind} active>
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>With icon</h3>
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size}>
                Action default
              </Button>
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button
                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                  outline
                  kind={kind}
                  size={size}
                  key={kind}
                >
                  Action {kind}
                </Button>
              ))}
            </Items>
          ))}
          <h3>Only icon</h3>
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} outline size={size} />
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button
                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                  outline
                  kind={kind}
                  size={size}
                  key={kind}
                />
              ))}
            </Items>
          ))}
          <h3>Disabled</h3>
          <Items>
            <Button outline disabled>
              Action default
            </Button>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button outline kind={kind} key={kind} disabled>
                Action {kind}
              </Button>
            ))}
          </Items>
        </Stack>
      </Stack>
      <Stack space="medium">
        <h2>Solid &amp; Kind</h2>
        <Stack space="medium">
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button solid size={size}>
                Action default
              </Button>
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button solid kind={kind} key={kind} size={size}>
                  Action {kind}
                </Button>
              ))}
            </Items>
          ))}
          <h3>Active</h3>
          <Items>
            <Button solid active>
              Action default
            </Button>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button solid kind={kind} key={kind} active>
                Action {kind}
              </Button>
            ))}
          </Items>
          <h3>With icon</h3>
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size}>
                Action default
              </Button>
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button
                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                  solid
                  kind={kind}
                  size={size}
                  key={kind}
                >
                  Action {kind}
                </Button>
              ))}
            </Items>
          ))}
          <h3>Only icon</h3>
          {Object.values(BUTTON_SIZE).map((size) => (
            <Items key={size}>
              <Button glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE} solid size={size} />
              {Object.values(BUTTON_KIND).map((kind) => (
                <Button
                  glyph={Icon.ICONS.ARROW_RIGHT_CIRCLE}
                  solid
                  kind={kind}
                  size={size}
                  key={kind}
                />
              ))}
            </Items>
          ))}
          <h3>Disabled</h3>
          <Items>
            <Button solid disabled>
              Action default
            </Button>
            {Object.values(BUTTON_KIND).map((kind) => (
              <Button solid kind={kind} key={kind} disabled>
                Action {kind}
              </Button>
            ))}
          </Items>
        </Stack>
      </Stack>
    </Stack>
  ),
};