/**
 * KRA - Icon Selector Component
 * Select icons from Ant Design Icons
 */
import React, { useState, useMemo } from 'react';
import { Select, Space } from 'antd';
import * as Icons from '@ant-design/icons';

interface IconSelectorProps {
  value?: string;
  onChange?: (value: string) => void;
}

// 常用图标列表
const commonIcons = [
  'HomeOutlined',
  'SettingOutlined',
  'UserOutlined',
  'TeamOutlined',
  'MenuOutlined',
  'AppstoreOutlined',
  'DashboardOutlined',
  'FileOutlined',
  'FolderOutlined',
  'DatabaseOutlined',
  'CloudOutlined',
  'SafetyOutlined',
  'LockOutlined',
  'KeyOutlined',
  'ApiOutlined',
  'CodeOutlined',
  'BugOutlined',
  'ToolOutlined',
  'ControlOutlined',
  'ProfileOutlined',
  'TableOutlined',
  'FormOutlined',
  'OrderedListOutlined',
  'UnorderedListOutlined',
  'BarChartOutlined',
  'LineChartOutlined',
  'PieChartOutlined',
  'AreaChartOutlined',
  'RadarChartOutlined',
  'HeatMapOutlined',
  'FundOutlined',
  'StockOutlined',
  'RiseOutlined',
  'FallOutlined',
  'BoxPlotOutlined',
  'DotChartOutlined',
  'SlidersFilled',
  'SlidersOutlined',
  'MailOutlined',
  'MessageOutlined',
  'CommentOutlined',
  'NotificationOutlined',
  'BellOutlined',
  'SoundOutlined',
  'AlertOutlined',
  'WarningOutlined',
  'InfoCircleOutlined',
  'QuestionCircleOutlined',
  'CheckCircleOutlined',
  'CloseCircleOutlined',
  'ExclamationCircleOutlined',
  'PlusCircleOutlined',
  'MinusCircleOutlined',
  'PlusOutlined',
  'MinusOutlined',
  'CloseOutlined',
  'CheckOutlined',
  'EditOutlined',
  'DeleteOutlined',
  'CopyOutlined',
  'ScissorOutlined',
  'SnippetsOutlined',
  'DiffOutlined',
  'HighlightOutlined',
  'AlignCenterOutlined',
  'AlignLeftOutlined',
  'AlignRightOutlined',
  'BgColorsOutlined',
  'BoldOutlined',
  'ItalicOutlined',
  'UnderlineOutlined',
  'StrikethroughOutlined',
  'FontColorsOutlined',
  'FontSizeOutlined',
  'LineHeightOutlined',
  'OrderedListOutlined',
  'UnorderedListOutlined',
  'SearchOutlined',
  'ZoomInOutlined',
  'ZoomOutOutlined',
  'FullscreenOutlined',
  'FullscreenExitOutlined',
  'ExpandOutlined',
  'CompressOutlined',
  'ExpandAltOutlined',
  'ShrinkOutlined',
  'ArrowsAltOutlined',
  'VerticalAlignTopOutlined',
  'VerticalAlignMiddleOutlined',
  'VerticalAlignBottomOutlined',
  'VerticalLeftOutlined',
  'VerticalRightOutlined',
  'UpOutlined',
  'DownOutlined',
  'LeftOutlined',
  'RightOutlined',
  'DoubleLeftOutlined',
  'DoubleRightOutlined',
  'UpCircleOutlined',
  'DownCircleOutlined',
  'LeftCircleOutlined',
  'RightCircleOutlined',
  'CaretUpOutlined',
  'CaretDownOutlined',
  'CaretLeftOutlined',
  'CaretRightOutlined',
  'SwapOutlined',
  'SwapLeftOutlined',
  'SwapRightOutlined',
  'EnterOutlined',
  'RollbackOutlined',
  'RetweetOutlined',
  'SyncOutlined',
  'ReloadOutlined',
  'RedoOutlined',
  'UndoOutlined',
  'LoginOutlined',
  'LogoutOutlined',
  'ImportOutlined',
  'ExportOutlined',
  'UploadOutlined',
  'DownloadOutlined',
  'CloudUploadOutlined',
  'CloudDownloadOutlined',
  'CloudSyncOutlined',
  'CloudServerOutlined',
  'SaveOutlined',
  'PrinterOutlined',
  'ShareAltOutlined',
  'LinkOutlined',
  'DisconnectOutlined',
  'WifiOutlined',
  'GlobalOutlined',
  'EnvironmentOutlined',
  'CompassOutlined',
  'AimOutlined',
  'SendOutlined',
  'PushpinOutlined',
  'FlagOutlined',
  'TagOutlined',
  'TagsOutlined',
  'BookOutlined',
  'ReadOutlined',
  'FileTextOutlined',
  'FilePdfOutlined',
  'FileWordOutlined',
  'FileExcelOutlined',
  'FilePptOutlined',
  'FileImageOutlined',
  'FileMarkdownOutlined',
  'FileUnknownOutlined',
  'FileAddOutlined',
  'FileExclamationOutlined',
  'FileDoneOutlined',
  'FileSearchOutlined',
  'FileSyncOutlined',
  'FileZipOutlined',
  'FolderAddOutlined',
  'FolderOpenOutlined',
  'FolderViewOutlined',
  'PictureOutlined',
  'CameraOutlined',
  'VideoCameraOutlined',
  'PlayCircleOutlined',
  'PauseCircleOutlined',
  'StopOutlined',
  'FastBackwardOutlined',
  'FastForwardOutlined',
  'StepBackwardOutlined',
  'StepForwardOutlined',
  'BackwardOutlined',
  'ForwardOutlined',
  'CaretUpFilled',
  'CaretDownFilled',
  'CaretLeftFilled',
  'CaretRightFilled',
  'CalendarOutlined',
  'ScheduleOutlined',
  'ClockCircleOutlined',
  'FieldTimeOutlined',
  'HistoryOutlined',
  'HourglassOutlined',
  'ShoppingCartOutlined',
  'ShoppingOutlined',
  'ShopOutlined',
  'GiftOutlined',
  'TrophyOutlined',
  'CrownOutlined',
  'StarOutlined',
  'HeartOutlined',
  'LikeOutlined',
  'DislikeOutlined',
  'SmileOutlined',
  'MehOutlined',
  'FrownOutlined',
  'ManOutlined',
  'WomanOutlined',
  'SolutionOutlined',
  'IdcardOutlined',
  'ContactsOutlined',
  'CarryOutOutlined',
  'AuditOutlined',
  'InsuranceOutlined',
  'SafetyCertificateOutlined',
  'SecurityScanOutlined',
  'PropertySafetyOutlined',
  'BankOutlined',
  'MoneyCollectOutlined',
  'PayCircleOutlined',
  'DollarOutlined',
  'EuroOutlined',
  'PoundOutlined',
  'AccountBookOutlined',
  'WalletOutlined',
  'TransactionOutlined',
  'ReconciliationOutlined',
  'CalculatorOutlined',
  'FundProjectionScreenOutlined',
  'FundViewOutlined',
  'ProjectOutlined',
  'PartitionOutlined',
  'SubnodeOutlined',
  'ClusterOutlined',
  'DeploymentUnitOutlined',
  'BuildOutlined',
  'BlockOutlined',
  'GatewayOutlined',
  'NodeIndexOutlined',
  'NodeExpandOutlined',
  'NodeCollapseOutlined',
  'ForkOutlined',
  'MergeOutlined',
  'BranchesOutlined',
  'PullRequestOutlined',
  'CiOutlined',
  'CiCircleOutlined',
  'Html5Outlined',
  'ConsoleSqlOutlined',
  'CodeSandboxOutlined',
  'CodepenOutlined',
  'CodepenCircleOutlined',
  'GithubOutlined',
  'GitlabOutlined',
  'ChromeOutlined',
  'FirefoxOutlined',
  'IeOutlined',
  'SafariOutlined',
  'OperaOutlined',
  'EdgeOutlined',
  'AndroidOutlined',
  'AppleOutlined',
  'WindowsOutlined',
  'LinuxOutlined',
  'AmazonOutlined',
  'GoogleOutlined',
  'AlipayOutlined',
  'WechatOutlined',
  'TaobaoOutlined',
  'WeiboOutlined',
  'TwitterOutlined',
  'FacebookOutlined',
  'InstagramOutlined',
  'YoutubeOutlined',
  'LinkedinOutlined',
  'SkypeOutlined',
  'SlackOutlined',
  'DribbbleOutlined',
  'BehanceOutlined',
  'MediumOutlined',
  'RedditOutlined',
  'WhatsAppOutlined',
  'DingdingOutlined',
  'ZhihuOutlined',
  'QqOutlined',
  'AliwangwangOutlined',
  'YuqueOutlined',
  'DropboxOutlined',
  'TrelloOutlined',
  'SpotifyOutlined',
  'SoundCloudOutlined',
];

const IconSelector: React.FC<IconSelectorProps> = ({ value, onChange }) => {
  const [searchValue, setSearchValue] = useState('');

  // 过滤图标
  const filteredIcons = useMemo(() => {
    if (!searchValue) return commonIcons;
    const lowerSearch = searchValue.toLowerCase();
    return commonIcons.filter((icon) => icon.toLowerCase().includes(lowerSearch));
  }, [searchValue]);

  // 渲染图标
  const renderIcon = (iconName: string) => {
    const IconComponent = (Icons as any)[iconName];
    return IconComponent ? <IconComponent /> : null;
  };

  // 选项
  const options = filteredIcons.map((icon) => ({
    value: icon,
    label: (
      <Space>
        {renderIcon(icon)}
        <span>{icon}</span>
      </Space>
    ),
  }));

  return (
    <Select
      value={value}
      onChange={onChange}
      placeholder="请选择图标"
      allowClear
      showSearch
      filterOption={false}
      onSearch={setSearchValue}
      options={options}
      style={{ width: '100%' }}
      optionLabelProp="value"
      dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
      suffixIcon={value ? renderIcon(value) : undefined}
    />
  );
};

export default IconSelector;
