import React from 'react'
import { Button } from '../components/Button'
import type { Meta, StoryObj } from '@storybook/react'
import { ButtonVariant, SizeVariant, ColorVariant, DisabledVariant } from '../types'

const sizes: SizeVariant[] = ['small', 'medium', 'large']
const disableds: DisabledVariant[] = ['true', 'false']
const variants: ButtonVariant[] = ['text', 'outlined', 'contained']
const colors: ColorVariant[] = [
  'inherit',
  'primary',
  'secondary',
  'success',
  'error',
  'info',
  'warning',
]

const meta = {
  title: 'Layout/Button',
  component: Button,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {},
} satisfies Meta<typeof Button>

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {
  disabled: false,
}

export const Playground: Story = {
  args: {
    label: 'My Button',
    disabled: defaultArgs.disabled,
    size: 'medium',
    color: 'primary',
    variant: 'contained',
  },
}

export const ButtonSizes = () => (
  <>
    {sizes.map((size, key) => (
      <Button
        key={key}
        label={`Size ${size}`}
        size={size}
        variant="contained"
        style={{ marginRight: '5px' }}
        {...defaultArgs}
      />
    ))}
  </>
)

export const ButtonVariants = () => (
  <>
    {variants.map((variant, key) => (
      <Button
        key={key}
        variant={variant}
        label={`Variant ${variant}`}
        style={{ marginRight: '5px' }}
        {...defaultArgs}
      />
    ))}
  </>
)

export const ButtonColorsDefault = () => (
  <>
    {colors.map((color, key) => (
      <Button
        key={key}
        variant="outlined"
        label={`Color ${color}`}
        color={color}
        style={{ margin: '2px' }}
        {...defaultArgs}
      />
    ))}
    <div>
      {colors.map((color, key) => (
        <Button
          key={key}
          label={`Color ${color}`}
          color={color}
          variant="contained"
          style={{ margin: '2px' }}
          {...defaultArgs}
        />
      ))}
    </div>
  </>
)