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

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

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    children: '알림 설정',
  },
}

export const Selected: Story = {
  render: function Render() {
    const [isSelected, setIsSelected] = useState(true)
    return (
      <Switch isSelected={isSelected} onChange={setIsSelected}>
        활성화됨
      </Switch>
    )
  },
}

export const Unselected: Story = {
  render: function Render() {
    const [isSelected, setIsSelected] = useState(false)
    return (
      <Switch isSelected={isSelected} onChange={setIsSelected}>
        비활성화됨
      </Switch>
    )
  },
}

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

export const DisabledSelected: Story = {
  args: {
    isDisabled: true,
    isSelected: true,
    children: '비활성화됨 (켜짐)',
  },
}

export const ReadOnly: Story = {
  args: {
    isReadOnly: true,
    isSelected: true,
    children: '읽기 전용',
  },
}

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

export const Controlled: Story = {
  render: function Render() {
    const [isSelected, setIsSelected] = useState(false)
    return (
      <div className="space-y-4">
        <Switch isSelected={isSelected} onChange={setIsSelected}>
          알림 받기
        </Switch>
        <p className="text-sm text-gray-600">상태: {isSelected ? '켜짐' : '꺼짐'}</p>
      </div>
    )
  },
}

export const MultipleSettings: Story = {
  render: function Render() {
    const [settings, setSettings] = useState({
      notifications: true,
      darkMode: false,
      autoSave: true,
    })

    const handleChange = (key: keyof typeof settings) => (isSelected: boolean) => {
      setSettings((prev) => ({ ...prev, [key]: isSelected }))
    }

    return (
      <div className="space-y-4">
        <Switch isSelected={settings.notifications} onChange={handleChange('notifications')}>
          알림 설정
        </Switch>
        <Switch isSelected={settings.darkMode} onChange={handleChange('darkMode')}>
          다크 모드
        </Switch>
        <Switch isSelected={settings.autoSave} onChange={handleChange('autoSave')}>
          자동 저장
        </Switch>
      </div>
    )
  },
}

export const AllStates: Story = {
  render: () => (
    <div className="space-y-4">
      <Switch>기본 (꺼짐)</Switch>
      <Switch isSelected>기본 (켜짐)</Switch>
      <Switch isDisabled>비활성화 (꺼짐)</Switch>
      <Switch isDisabled isSelected>
        비활성화 (켜짐)
      </Switch>
      <Switch isReadOnly isSelected>
        읽기 전용
      </Switch>
    </div>
  ),
}