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

const meta = {
  title: 'Components/Select',
  component: Select,
  argTypes: {
    isDisabled: { control: 'boolean' },
    isReadOnly: { control: 'boolean' },
    placement: {
      control: 'select',
      options: ['bottom', 'top'],
    },
  },
} satisfies Meta<typeof Select>

export default meta
type Story = StoryObj<typeof meta>

const sampleItems: SelectOption[] = [
  { label: '옵션 1', value: '1' },
  { label: '옵션 2', value: '2' },
  { label: '옵션 3', value: '3' },
  { label: '비활성화 옵션', value: '4', isDisabled: true },
]

export const Default: Story = {
  args: {
    items: sampleItems,
    placeholder: '선택해주세요',
  },
}

export const WithSelectedValue: Story = {
  args: {
    items: sampleItems,
    defaultSelectedKey: '2',
  },
}

export const Disabled: Story = {
  args: {
    items: sampleItems,
    defaultSelectedKey: '1',
    isDisabled: true,
  },
}

export const ReadOnly: Story = {
  args: {
    items: sampleItems,
    defaultSelectedKey: '1',
    isReadOnly: true,
  },
}

export const PlacementTop: Story = {
  args: {
    items: sampleItems,
    placeholder: '위로 열림',
    placement: 'top',
  },
  decorators: [
    (Story) => (
      <div className="pt-40">
        <Story />
      </div>
    ),
  ],
}

export const Controlled: Story = {
  render: function Render() {
    const [value, setValue] = useState<string | number>('1')
    return (
      <div className="flex flex-col gap-4">
        <Select
          items={sampleItems}
          selectedKey={value}
          onChange={setValue}
        />
        <p className="text-sm">선택된 값: {value}</p>
      </div>
    )
  },
}

export const ManyOptions: Story = {
  args: {
    items: Array.from({ length: 20 }, (_, i) => ({
      label: `옵션 ${i + 1}`,
      value: String(i + 1),
    })),
    placeholder: '많은 옵션',
    maxHeight: 200,
  },
}