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

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

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

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {
  color: 'primary',
}

export const Playground: Story = {
  args: {
    children: <Icons icon="checkCircle" color="primary" />,
    size: 'medium',
    color: 'primary',
    variant: 'text',
  },
}

export const IconButtonSizes = () => (
  <>
    {sizes.map((size, key) => (
      <IconButton key={key} size={size} variant="text" color="primary" sx={{ marginRight: '5px' }}>
        <Icons icon="checkCircle" color="primary" scale={size} />
      </IconButton>
    ))}
  </>
)

IconButtonSizes.storyName = 'IconButton Sizes'

export const IconButtonVariants = () => (
  <>
    {variants.map((variant, key) => (
      <IconButton
        key={key}
        size="medium"
        variant={variant}
        color="primary"
        sx={{ marginRight: '5px' }}
      >
        <Icons
          icon="faceHappy"
          color={variant === 'contained' ? 'white' : 'primary'}
          scale="medium"
        />
      </IconButton>
    ))}
  </>
)

IconButtonVariants.storyName = 'IconButton Variants'

export const IconButtonColors = () => (
  <>
    {colors.map((color, key) => (
      <IconButton key={key} size="medium" variant="outlined" color={color} sx={{ margin: '5px' }}>
        <Icons icon="starOutlined" color={color} scale="medium" />
      </IconButton>
    ))}
    <div>
      {colors.map((color, key) => (
        <IconButton
          key={key}
          size="medium"
          variant="contained"
          color={color}
          sx={{ margin: '5px' }}
        >
          <Icons icon="user" color="white" scale="medium" />
        </IconButton>
      ))}
    </div>
  </>
)

IconButtonColors.storyName = 'IconButton Colors'