import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import { Checkbox } from './Checkbox'

const meta = {
  title: 'Components/Checkbox',
  component: Checkbox,
  argTypes: {
    isDisabled: {
      control: 'boolean',
    },
    isIndeterminate: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof Checkbox>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: '동의합니다',
  },
}

export const Checked: Story = {
  render: function Render() {
    const [isSelected, setIsSelected] = useState(true)
    return (
      <Checkbox isSelected={isSelected} onChange={setIsSelected}>
        선택됨
      </Checkbox>
    )
  },
}

export const Unchecked: Story = {
  render: function Render() {
    const [isSelected, setIsSelected] = useState(false)
    return (
      <Checkbox isSelected={isSelected} onChange={setIsSelected}>
        선택 안됨
      </Checkbox>
    )
  },
}

export const Indeterminate: Story = {
  args: {
    isIndeterminate: true,
    children: '일부 선택됨',
  },
}

export const Disabled: Story = {
  args: {
    isDisabled: true,
    children: '비활성화',
  },
}

export const DisabledChecked: Story = {
  args: {
    isDisabled: true,
    isSelected: true,
    children: '비활성화 (선택됨)',
  },
}

export const WithoutLabel: Story = {
  args: {},
}

export const MultipleCheckboxes: Story = {
  render: function Render() {
    const [checkedItems, setCheckedItems] = useState<Record<string, boolean>>({
      option1: false,
      option2: true,
      option3: false,
    })

    const handleChange = (key: string) => (isSelected: boolean) => {
      setCheckedItems((prev) => ({ ...prev, [key]: isSelected }))
    }

    return (
      <div className="flex flex-col gap-2">
        <Checkbox isSelected={checkedItems.option1} onChange={handleChange('option1')}>
          옵션 1
        </Checkbox>
        <Checkbox isSelected={checkedItems.option2} onChange={handleChange('option2')}>
          옵션 2
        </Checkbox>
        <Checkbox isSelected={checkedItems.option3} onChange={handleChange('option3')}>
          옵션 3
        </Checkbox>
      </div>
    )
  },
}

export const AllStates: Story = {
  render: () => (
    <div className="flex flex-col gap-2">
      <Checkbox>기본</Checkbox>
      <Checkbox isSelected>선택됨</Checkbox>
      <Checkbox isIndeterminate>일부 선택</Checkbox>
      <Checkbox isDisabled>비활성화</Checkbox>
      <Checkbox isDisabled isSelected>
        비활성화 (선택됨)
      </Checkbox>
    </div>
  ),
}