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

const meta = {
  title: 'Components/RadioGroup',
  component: RadioGroup,
  args: {
    items: [],
    orientation: 'horizontal',
    isDisabled: false,
    isReadOnly: false,
  },
  argTypes: {
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
    },
    isDisabled: {
      control: 'boolean',
    },
    isReadOnly: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof RadioGroup>

export default meta
type Story = StoryObj<typeof meta>

const defaultItems = [
  { value: 'option1', label: '옵션 1' },
  { value: 'option2', label: '옵션 2' },
  { value: 'option3', label: '옵션 3' },
]

export const Default: Story = {
  args: {
    items: defaultItems,
  },
}

export const Horizontal: Story = {
  args: {
    items: defaultItems,
    orientation: 'horizontal',
  },
}

export const Vertical: Story = {
  args: {
    items: defaultItems,
    orientation: 'vertical',
  },
}

export const WithDefaultValue: Story = {
  render: function Render() {
    const [value, setValue] = useState('option2')
    return (
      <RadioGroup
        items={defaultItems}
        value={value}
        onChange={setValue}
      />
    )
  },
}

export const Disabled: Story = {
  args: {
    items: defaultItems,
    isDisabled: true,
  },
}

export const ReadOnly: Story = {
  args: {
    items: defaultItems,
    isReadOnly: true,
    value: 'option1',
  },
}

export const WithDisabledOption: Story = {
  args: {
    items: [
      { value: 'option1', label: '옵션 1' },
      { value: 'option2', label: '옵션 2 (비활성화)', isDisabled: true },
      { value: 'option3', label: '옵션 3' },
    ],
  },
}

export const WithManyOptions: Story = {
  args: {
    items: [
      { value: 'apple', label: '사과' },
      { value: 'banana', label: '바나나' },
      { value: 'orange', label: '오렌지' },
      { value: 'grape', label: '포도' },
      { value: 'strawberry', label: '딸기' },
    ],
    orientation: 'vertical',
  },
}

export const Controlled: Story = {
  render: function Render() {
    const [value, setValue] = useState('')
    return (
      <div className="space-y-4">
        <RadioGroup
          items={defaultItems}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-gray-600">선택된 값: {value || '없음'}</p>
      </div>
    )
  },
}