import React from 'react'
import { CheckBox } from '../components/CheckBox'
import type { Meta, StoryObj } from '@storybook/react'
import { FormControlLabel } from '@mui/material'
import { pink } from '@mui/material/colors'

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

export default meta

type Story = StoryObj<typeof meta>

const defaultArgs = {
  disabled: false,
}

export const Playground: Story = {
  args: {
    color: 'primary',
  },
}

const label = { inputProps: { 'aria-label': 'Checkbox demo' } }

export const CheckboxVariant = () => {
  return (
    <>
      <CheckBox {...label} />
      <CheckBox {...label} defaultChecked />
      <CheckBox {...label} disabled />
      <CheckBox {...label} disabled checked />
    </>
  )
}
CheckboxVariant.storyName = 'CheckBox Variants'

export const CheckboxProps = () => {
  return (
    <>
      <FormControlLabel control={<CheckBox />} label="Label Default" />
      <FormControlLabel control={<CheckBox defaultChecked />} label="Label" />
      <FormControlLabel required control={<CheckBox />} label="Required" />
      <FormControlLabel disabled control={<CheckBox />} label="Disabled" />
    </>
  )
}
CheckboxProps.storyName = 'Variants and Label'

export const CheckboxColors = () => {
  return (
    <>
      <CheckBox {...label} defaultChecked />
      <CheckBox {...label} defaultChecked color="secondary" />
      <CheckBox {...label} defaultChecked color="success" />
      <CheckBox {...label} defaultChecked color="default" />
      <CheckBox
        {...label}
        defaultChecked
        sx={{
          color: pink[800],
          '&.Mui-checked': {
            color: pink[600],
          },
        }}
      />
    </>
  )
}
CheckboxColors.storyName = 'CheckBox Colors'

export const CheckboxSizes = () => {
  return (
    <>
      <FormControlLabel control={<CheckBox size="small" />} label="CheckBox Small" />
      <FormControlLabel control={<CheckBox />} label="CheckBox Default" />
      <FormControlLabel control={<CheckBox size="medium" />} label="CheckBox Medium" />
    </>
  )
}
CheckboxSizes.storyName = 'CheckBox Sizes'