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

const meta = {
  title: 'Components/Radio',
  component: Radio,
  args: {
    name: 'default',
    value: 'option1',
  },
  argTypes: {
    disabled: {
      control: 'boolean',
    },
    readOnly: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof Radio>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    name: 'default',
    value: 'option1',
    children: '옵션 1',
  },
}

export const Checked: Story = {
  args: {
    name: 'checked',
    value: 'option1',
    checked: true,
    children: '선택됨',
  },
}

export const Disabled: Story = {
  args: {
    name: 'disabled',
    value: 'option1',
    disabled: true,
    children: '비활성화',
  },
}

export const DisabledChecked: Story = {
  args: {
    name: 'disabled-checked',
    value: 'option1',
    disabled: true,
    checked: true,
    children: '비활성화 (선택됨)',
  },
}

export const ReadOnly: Story = {
  args: {
    name: 'readonly',
    value: 'option1',
    readOnly: true,
    checked: true,
    children: '읽기 전용',
  },
}

export const RadioGroup: Story = {
  render: () => {
    const [selected, setSelected] = useState('option1')
    return (
      <div className="flex flex-col gap-2">
        <Radio name="group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
          옵션 1
        </Radio>
        <Radio name="group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
          옵션 2
        </Radio>
        <Radio name="group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
          옵션 3
        </Radio>
      </div>
    )
  },
}

export const HorizontalRadioGroup: Story = {
  render: () => {
    const [selected, setSelected] = useState('option1')
    return (
      <div className="flex gap-4">
        <Radio name="horizontal-group" value="option1" checked={selected === 'option1'} onChange={setSelected}>
          옵션 1
        </Radio>
        <Radio name="horizontal-group" value="option2" checked={selected === 'option2'} onChange={setSelected}>
          옵션 2
        </Radio>
        <Radio name="horizontal-group" value="option3" checked={selected === 'option3'} onChange={setSelected}>
          옵션 3
        </Radio>
      </div>
    )
  },
}

export const WithMixedStates: Story = {
  render: () => {
    const [selected, setSelected] = useState('option1')
    return (
      <div className="flex flex-col gap-2">
        <Radio name="mixed" value="option1" checked={selected === 'option1'} onChange={setSelected}>
          활성화 옵션 1
        </Radio>
        <Radio name="mixed" value="option2" checked={selected === 'option2'} onChange={setSelected}>
          활성화 옵션 2
        </Radio>
        <Radio name="mixed" value="option3" disabled>
          비활성화 옵션
        </Radio>
      </div>
    )
  },
}