import React from 'react';
import { Modal, Input, Space } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styles from './index.module.css';
import { getAvailableIcons } from '@/config/icons.tsx';

interface IconSelectProps {
  value?: string;
  onChange?: (value: string) => void;
  visible: boolean;
  onCancel: () => void;
}

const IconSelect: React.FC<IconSelectProps> = ({
  onChange,
  visible,
  onCancel
}) => {
  const [search, setSearch] = React.useState('');

  // 获取所有图标
  const iconList = React.useMemo(() => {
    const icons = getAvailableIcons();
    return icons.filter(icon => 
      search ? icon.name.toLowerCase().includes(search.toLowerCase()) : true
    );
  }, [search]);

  const handleSelect = (iconName: string) => {
    onChange?.(iconName);
    onCancel();
  };

  return (
    <Modal
      title="选择图标"
      open={visible}
      onCancel={onCancel}
      width={800}
      footer={null}
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        <Input
          prefix={<SearchOutlined />}
          placeholder="搜索图标"
          value={search}
          onChange={e => setSearch(e.target.value)}
        />
        <div className={styles.iconGrid}>
          {iconList.map(({ name, component: Icon }) => (
            <div
              key={name}
              className={styles.iconItem}
              onClick={() => handleSelect(name)}
            >
              {React.createElement(Icon)}
              <div className={styles.iconName}>
                {name.replace('Outlined', '')}
              </div>
            </div>
          ))}
        </div>
      </Space>
    </Modal>
  );
};

export default IconSelect; 