shanghai-residences/src/components/quiz/drag-fill/drag-fill.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'
import { useState } from 'react'
import DragFill from './drag-fill'
import type { DragFillProps } from './drag-fill.types'
import { cn } from '@/lib/utils'

const meta: Meta<typeof DragFill> = {
  title: 'Components/Quiz/DragFill',
  component: DragFill,
  tags: ['autodocs'],
  argTypes: {
    options: {
      control: { type: 'object' },
      description: '可拖拽的选项列表',
    },
    blanks: {
      control: { type: 'object' },
      description: '空白区域列表',
    },
    value: {
      control: { type: 'object' },
      description: '当前填充结果（受控模式）',
    },
    defaultValue: {
      control: { type: 'object' },
      description: '默认填充结果',
    },
    disabled: {
      control: { type: 'boolean' },
      description: '是否禁用整个组件',
    },
    allowDuplicate: {
      control: { type: 'boolean' },
      description: '是否允许重复选择同一选项',
    },
    showSubmitButton: {
      control: { type: 'boolean' },
      description: '是否显示提交按钮',
    },
    submitText: {
      control: { type: 'text' },
      description: '提交按钮文本',
    },
  },
}

export default meta
type Story = StoryObj<typeof DragFill>

// 基础示例
export const Default: Story = {
  args: {
    options: ['选项A', '选项B', '选项C', '选项D'],
    blanks: ['空白1', '空白2', '空白3'],
    onSubmit: (results) => {
      console.log('填充结果:', results)
    },
  },
}

// 使用选项和空白对象
export const WithObjects: Story = {
  args: {
    options: [
      { value: 'opt1', label: '选项一' },
      { value: 'opt2', label: '选项二' },
      { value: 'opt3', label: '选项三（禁用）', disabled: true },
      { value: 'opt4', label: '选项四' },
    ],
    blanks: [
      { id: 'blank1', label: '第一个空白', required: true },
      { id: 'blank2', label: '第二个空白' },
      { id: 'blank3', label: '第三个空白（必填）', required: true },
    ],
    onSubmit: (results) => {
      console.log('填充结果:', results)
    },
  },
}

// 受控模式
export const Controlled: Story = {
  render: () => {
    const [value, setValue] = useState<any[]>([])
    return (
      <div className="space-y-4">
        <DragFill
          options={['选项A', '选项B', '选项C']}
          blanks={['空白1', '空白2']}
          value={value}
          onChange={setValue}
          onSubmit={(results) => {
            alert(`提交的结果: ${JSON.stringify(results)}`)
          }}
        />
        <div className="text-sm text-gray-600">当前填充: {JSON.stringify(value)}</div>
      </div>
    )
  },
}

// 允许重复选择
export const AllowDuplicate: Story = {
  args: {
    options: ['选项A', '选项B', '选项C'],
    blanks: ['空白1', '空白2', '空白3'],
    allowDuplicate: true,
    onSubmit: (results) => {
      console.log('填充结果:', results)
    },
  },
}

// 禁用状态
export const Disabled: Story = {
  args: {
    options: ['选项A', '选项B', '选项C'],
    blanks: ['空白1', '空白2'],
    disabled: true,
    defaultValue: [{ blankId: 'blank1', optionValue: '选项A' }],
  },
}

// 不显示提交按钮
export const WithoutSubmitButton: Story = {
  args: {
    options: ['选项A', '选项B', '选项C'],
    blanks: ['空白1', '空白2'],
    showSubmitButton: false,
    onChange: (results) => {
      console.log('填充变化:', results)
    },
  },
}

// 自定义样式
export const CustomStyled: Story = {
  args: {
    options: ['选项A', '选项B', '选项C', '选项D'],
    blanks: ['空白1', '空白2'],
    className: 'max-w-2xl mx-auto p-6 bg-gray-50 rounded-xl',
    optionClassName: 'text-lg font-semibold',
    blankClassName: 'min-h-[100px]',
    submitText: '确认答案',
    onSubmit: (results) => {
      console.log('填充结果:', results)
    },
  },
}

// 自定义渲染
export const CustomRender: Story = {
  render: () => {
    return (
      <DragFill
        options={['选项A', '选项B', '选项C']}
        blanks={['空白1', '空白2']}
        renderOption={(option, isUsed) => (
          <div
            className={cn(
              'p-4 rounded-lg border-2 transition-all cursor-move',
              isUsed
                ? 'border-gray-200 bg-gray-100 opacity-50'
                : 'border-blue-300 bg-blue-50 hover:border-blue-500'
            )}
            draggable={!isUsed}
          >
            <div className="flex items-center gap-2">
              <span className="text-2xl">📦</span>
              <span className="font-medium">{option.label}</span>
            </div>
          </div>
        )}
        renderBlank={(blank, filledValue) => (
          <div
            className={cn(
              'min-h-[100px] p-6 rounded-lg border-2 border-dashed flex items-center justify-center',
              filledValue ? 'border-green-400 bg-green-50' : 'border-purple-300 bg-purple-50'
            )}
          >
            {filledValue ? (
              <div className="text-green-700 font-bold text-lg">✓ {filledValue}</div>
            ) : (
              <div className="text-purple-500 text-center">
                <div className="text-3xl mb-2">⬇️</div>
                <div>{blank.label || '拖拽到这里'}</div>
              </div>
            )}
          </div>
        )}
        onSubmit={(results) => {
          console.log('填充结果:', results)
        }}
      />
    )
  },
}