import type { Meta, StoryObj } from '@storybook/react'
import { SvgAdd1 } from '@chainlink/blocks-icons'
import type { ButtonVariant, ButtonSize, ButtonWidth } from './Button'
import {
  buttonVariants,
  visualVariants,
  sizeVariants,
  widthVariants,
} from './Button'
import { Button } from './Button'

const BUTTON_VARIANT_OPTIONS = Object.keys(visualVariants) as ButtonVariant[]

const BUTTON_SIZE_OPTIONS = Object.keys(sizeVariants).filter(
  (value): value is ButtonSize => value !== 'none',
)
const BUTTON_WIDTH_OPTIONS = Object.keys(widthVariants) as ButtonWidth[]

const meta = {
  title: 'Blocks/Button',
  component: Button,
  argTypes: {
    variant: {
      control: {
        type: 'select',
      },
      options: [...BUTTON_VARIANT_OPTIONS],
      table: {
        type: {
          summary: BUTTON_VARIANT_OPTIONS.map((value) => `'${value}'`).join(
            ' | ',
          ),
        },
        defaultValue: { summary: 'primary' },
      },
    },
    size: {
      control: {
        type: 'select',
      },
      options: BUTTON_SIZE_OPTIONS,
      table: {
        type: {
          summary: BUTTON_SIZE_OPTIONS.map((value) => `'${value}'`).join(' | '),
        },
        defaultValue: { summary: 'default' },
      },
    },
    width: {
      control: {
        type: 'select',
      },
      options: [...BUTTON_WIDTH_OPTIONS],
      table: {
        type: {
          summary: BUTTON_WIDTH_OPTIONS.map((value) => `'${value}'`).join(
            ' | ',
          ),
        },
        defaultValue: { summary: 'responsive' },
      },
    },
    children: {
      control: 'text',
      table: {
        type: { summary: 'string | React.ReactNode' },
      },
    },
    disabled: {
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    loading: {
      control: 'boolean',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
  },
} satisfies Meta<typeof Button>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: 'Button',
  },
}

export const WithIcon: Story = {
  render: (args) => (
    <Button {...args}>
      <SvgAdd1 />
      With Icon
    </Button>
  ),
}

export const Primary: Story = {
  render: (args) => (
    <div className="flex flex-wrap items-end gap-2">
      <Button {...args}>Default</Button>
      <Button {...args}>
        <SvgAdd1 />
        With Icon
      </Button>
      <Button {...args} disabled>
        Disabled
      </Button>
      <Button {...args} loading>
        Loading
      </Button>
      <Button {...args} size="sm">
        Small
      </Button>
      <Button {...args} size="xs">
        Extra Small
      </Button>
    </div>
  ),
}

export const Secondary: Story = {
  render: (args) => (
    <div className="flex flex-wrap items-end gap-2">
      <Button {...args}>Default</Button>
      <Button {...args}>
        <SvgAdd1 />
        With Icon
      </Button>
      <Button {...args} disabled>
        Disabled
      </Button>
      <Button {...args} loading>
        Loading
      </Button>
      <Button {...args} size="sm">
        Small
      </Button>
      <Button {...args} size="xs">
        Extra Small
      </Button>
    </div>
  ),
  args: { variant: 'secondary' },
}

export const Tertiary: Story = {
  render: (args) => (
    <div className="flex flex-wrap items-end gap-2">
      <Button {...args}>Default</Button>
      <Button {...args}>
        <SvgAdd1 />
        With Icon
      </Button>
      <Button {...args} disabled>
        Disabled
      </Button>
      <Button {...args} loading>
        Loading
      </Button>
      <Button {...args} size="sm">
        Small
      </Button>
      <Button {...args} size="xs">
        Extra Small
      </Button>
    </div>
  ),
  args: { variant: 'tertiary' },
}

export const Destructive: Story = {
  render: (_args) => (
    <div className="flex flex-wrap items-end gap-2">
      <Button variant="destructive">Default</Button>
      <Button variant="destructive">
        <SvgAdd1 />
        With Icon
      </Button>
      <Button variant="destructive" disabled>
        Disabled
      </Button>
      <Button variant="destructive" loading>
        Loading
      </Button>
      <Button variant="destructive" size="sm">
        Small
      </Button>
      <Button variant="destructive" size="xs">
        Extra Small
      </Button>
    </div>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use the destructive variant for irreversible or high-risk actions, usually after a confirmation step.',
      },
    },
  },
}

export const Ghost: Story = {
  render: (args) => (
    <div className="flex flex-wrap items-end gap-2">
      <Button {...args}>Default</Button>
      <Button {...args}>
        <SvgAdd1 />
        With Icon
      </Button>
      <Button {...args} disabled>
        Disabled
      </Button>
      <Button {...args} loading>
        Loading
      </Button>
      <Button {...args} size="sm">
        Small
      </Button>
      <Button {...args} size="xs">
        Extra Small
      </Button>
    </div>
  ),
  args: { variant: 'ghost' },
}

export const Widths: Story = {
  render: (args) => (
    <div className="flex flex-col gap-2">
      <Button {...args} width="responsive">
        <SvgAdd1 />
        Responsive
      </Button>
      <Button {...args} variant="secondary" width="hug">
        <SvgAdd1 />
        Hug
      </Button>
      <Button {...args} width="full">
        <SvgAdd1 />
        Full
      </Button>
    </div>
  ),
}

export const StyledLinkWithButtonVariants: Story = {
  render: (_args) => (
    <a
      href="https://example.com"
      className={buttonVariants({
        variant: 'primary',
        size: 'default',
      })}
    >
      Visit example
    </a>
  ),
}