import React, { useState, useEffect } from 'react';
import { Button, Input, Space, Tag } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';

type OptionCreatorProps = {
  options: { [key: string]: string } | { label: string; value: string }[] | undefined;
  onChange: (newOptions: { label: string; value: string }[]) => void;
};

const OptionCreator: React.FC<OptionCreatorProps> = ({ options, onChange }) => {
  const [localOptions, setLocalOptions] = useState<{ label: string; value: string }[]>([]);
  const [inputValue, setInputValue] = useState('');

  // 监听传入的 options 变化，更新本地状态
  useEffect(() => {
    let validOptions: { label: string; value: string }[] = [];
    if (Array.isArray(options)) {
      validOptions = options;
    } else if (typeof options === 'object' && options !== null) {
      validOptions = Object.entries(options).map(([value, label]) => ({ label, value }));
    }
    setLocalOptions(validOptions);
  }, [options]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  const handleAddOption = () => {
    if (inputValue.trim()) {
      const newOption = { label: inputValue, value: inputValue };
      // 检查新选项是否已存在，避免重复添加
      const isDuplicate = localOptions.some(option => option.value === newOption.value);
      if (!isDuplicate) {
        const newOptions = [...localOptions, newOption];
        setLocalOptions(newOptions);
        // 即时调用 onChange 通知父组件更新表单值
        onChange(newOptions); 
      }
      setInputValue('');
    }
  };

  const handleDeleteOption = (value: string) => {
    const newOptions = localOptions.filter(option => option.value !== value);
    setLocalOptions(newOptions);
    // 即时调用 onChange 通知父组件更新表单值
    onChange(newOptions); 
  };

  return (
    <div>
      <Space>
        <Input
          value={inputValue}
          onChange={handleInputChange}
          placeholder="输入新选项"
        />
        <Button onClick={handleAddOption}>添加选项</Button>
      </Space>
      <div style={{ marginTop: 16 }}>
        {localOptions.map(option => (
          <Tag
            key={option.value}
            closable
            onClose={() => handleDeleteOption(option.value)}
            icon={<DeleteOutlined />}
          >
            {option.label}
          </Tag>
        ))}
      </div>
    </div>
  );
};

export default OptionCreator;