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

const meta = {
  title: 'Components/TextArea',
  component: TextArea,
  argTypes: {
    readOnly: {
      control: 'boolean',
    },
    disabled: {
      control: 'boolean',
    },
  },
} satisfies Meta<typeof TextArea>

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    placeholder: '내용을 입력하세요',
    className: 'w-80 h-32',
  },
}

export const WithValue: Story = {
  render: function Render() {
    const [value, setValue] = useState('기본 텍스트 내용입니다.')
    return (
      <TextArea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="w-80 h-32"
      />
    )
  },
}

export const ReadOnly: Story = {
  args: {
    value: '읽기 전용 텍스트입니다. 수정할 수 없습니다.',
    readOnly: true,
    className: 'w-80 h-32',
  },
}

export const Disabled: Story = {
  args: {
    value: '비활성화된 텍스트입니다.',
    disabled: true,
    className: 'w-80 h-32',
  },
}

export const WithPlaceholder: Story = {
  args: {
    placeholder: '여기에 상세 설명을 입력하세요...',
    className: 'w-80 h-32',
  },
}

export const LargeTextArea: Story = {
  args: {
    placeholder: '큰 텍스트 영역입니다.',
    className: 'w-full h-48',
  },
}

export const SmallTextArea: Story = {
  args: {
    placeholder: '작은 텍스트 영역입니다.',
    className: 'w-60 h-20',
  },
}

export const WithMaxLength: Story = {
  render: function Render() {
    const [value, setValue] = useState('')
    const maxLength = 100
    return (
      <div className="space-y-2">
        <TextArea
          value={value}
          onChange={(e) => setValue(e.target.value)}
          maxLength={maxLength}
          placeholder="최대 100자까지 입력 가능합니다."
          className="w-80 h-32"
        />
        <p className="text-sm text-gray-500">
          {value.length}/{maxLength}
        </p>
      </div>
    )
  },
}

export const WithRows: Story = {
  args: {
    placeholder: 'rows 속성으로 높이를 지정할 수 있습니다.',
    rows: 5,
    className: 'w-80',
  },
}

export const AllStates: Story = {
  render: () => (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-1">기본</label>
        <TextArea placeholder="기본 상태" className="w-80 h-24" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">읽기 전용</label>
        <TextArea value="읽기 전용 텍스트" readOnly className="w-80 h-24" />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">비활성화</label>
        <TextArea value="비활성화된 텍스트" disabled className="w-80 h-24" />
      </div>
    </div>
  ),
}