import React from 'react';
import { Modal, Input, Row, Col } from 'antd';
import * as AllIcons from '@ant-design/icons';
import { SearchOutlined } from '@ant-design/icons';

type Props = {
  open: boolean;
  onClose: () => void;
  onSelect: (iconName: string) => void;
  value?: string | null;
};

const IconPicker: React.FC<Props> = ({ open, onClose, onSelect, value }) => {
  const [keyword, setKeyword] = React.useState('');

  // 需要排除的图标黑名单（字符串数组）
  const blacklist = [
    'AccountBookFilled',
    'AccountBookOutlined',
    'AccountBookTwoTone',
    'AlipayCircleFilled',
    'AlipayCircleoutlined',
    'AlipayOutined',
    'AlipaySquareFilled',
    'AlibabaOutlined',
    'AliwangwangFilled',
    'AliwangwangOutlined',
    'AliyunOutlined',
    'AmazonCircleFilled',
    'AmazonOutlined',
    'AmazonSquareFilled',
    'AndroidFilled',
    'AndroidOutlined',
    'Applefilled',
    'AppleOutlined',
    'ArrowDownOutlined',
    'ArrowLeftOutlined',
    'ArrowRightOutlined',
    'ArrowUpOutlined',
    'ArrowsAltOutlined',
    'BackwardFilled',
    'BackwardOutlined',
    'BaiduOutlined',
    'BehanceCircleFilled',
    'BehanceOutlined',
    'BehanceSquareFilled',
    'BehanceSquareOutlined',
    'Bilibilifilled',
    'BilibilioOutined',
    'BugFilled',
    'BugOutined',
    'BugTwoTone',
    'Carfilled',
    'CarOutined',
    'CarTwoTone',
    'CaretDownFilled',
    'CaretDownOutlined',
    'Caretleftfilled',
    'CaretleftOutlined',
    'CaretRightFilld',
    'CaretRightOutlined',
    'CaretUpFilled',
    'CaretUpoutlined',
    'CarryOutFilled',
    'Carryoutoutined',
    'CarryOutTwoTone',
    'CheckCircleFilled',
    'Checkcircleoutlined',
    'CheckCircleTwoTone',
    'CheckOutined',
    'CheckSquare',
    'ChromeFilled',
    'ChromeOutlined',
    'CiCircleFilledFilled',
    'CheckSquareTwoTone',
    'Cicircleoutlined',
    'CiCircleTwoTone',
    'Cioutlined',
    'CiTwoTone',
    'ClearOutlined',
    'ClockCirclefill',
    'ClockCircleOutined',
    'ClockCircleTwoTone',
    'CloseCirclefilled',
    'CloseCircleOutlined',
    'CloseCircleTwoTone',
    'CloseOutlined',
    'CloseSquareFilled',
    'CloseSquareoutlined',
    'CloseSquareTwoTone',
    'CloudDownloadOutlined',
    'CloudFilled',
    'Cloudoutined',
    'CloudServeroutlined',
    'CloudSyncOutlined',
    'CloudTwoTone',
    'CloudUploadOutlined',
    'ClusterOutlined',
    'CreditCardFilled',
    'Creditcardoutined',
    'CreditCardTwoTone',
    'DingdingOutlined',
    'DingtalkCircleFilled',
    'DingtalkOutlined',
    'DingtalkSquareFilled',
    'DislikeOutined',
    'DislikeTwoTone',
    'DockerOutlined',
    'DollarCircleFlilled',
    'DiscordFilled',
    'DislikeFilled',
    'DislikeOutine',
    'DislikeTwoToned',
    'DollarCircleOutlined',
    'DollarCircleTwoTone',
    'DollarOutlined',
    'DollarTwoTone',
    'DotNetOutlined',
    'DoubleLeftOutlined',
    'DoubleRightoutlined',
    'DownCircleFilled',
    'DownCircleOutlined',
    'DownCircleTwoTone',
    'DownOutlined',
    'DownSquareFilled',
    'DownSquareOutined',
    'DownSquareTwoTone',
    'DownloadOut!ined',
    'DragOutlined',
    'DribbbleCircleFilled',
    'DribbbleOutined',
    'DribboleSquareFilled',
    'DribbbleSquareOutlined',
    'DropboxCircleFilled',
    'DropboxOutlined',
    'DropboxSquar efilled',
    'Editfilled',
    'EditOutlined',
    'EditTwoTone',
    'EllipsisOutline',
    'EnterOutlined',
    'EnvironmentFilled',
    'Environmentoutlined',
    'EnvironmentTwoTone',
    'EuroCircleFille  EuroCircleOutl',
    'EuroCircleTwo',
    'EuroOutlined',
    'ined',
    'ExceptionOutl ined',
    'ExclamationCi rclefilled',
    'ExclamationCi rcleOutlined',
    'FacebookFille',
    'FacebookOutlined',
    'GithubFilled',
    'Githuboutine',
    'GitlabFilled',
    'GitlabOutlined',
    'GoogleCircleF illed',
    'GoogleOutlined',
    'GooglePlusCir clelilled',
    'GooglePlusOu tlined',
    'GooglePlusSq uareFilled',
    'GoogleSquare',
    'Htm15Filled',
    'Html50utlined',
    'PinterestFilled',
    'PinterestOutli ned',
    'PlayCircleFilled',
    'Html5TwoToneFilled',
    'WeibocircleFilled',
    'WeiboCircleoutlined',
    'WeiboOutline',
    'WeiboSquareFilled',
    'WeiboSquare',
    'WifiOutlined',
    'WindowsFilledOutlined',
    'WhatsAppOutlined',
    'WindowsOutlined',
    'WomanOutlined',
    'Xfilled',
    'XOutlined',
    'Yahoofilled',
    'YahooOutline',
    'Youtubefilled',
    'YoutubeOutlined',
    'Yuquefilled',
    'YuqueOutlined',
    'ZhihuCircleFilled',
    'ZhihuOutlined',
    'ZhihuSquareFilled',
    'ZoomInOutlined',
    'ZoomOutOutlined',
    'TwitchFilled',
    'TwitchOutlined',
    'TwitterCircleFilled',
    'TwitterOutlined',
    'TwitterSquare',
    'UndoOutlinedFilled',
    'UnderlineOutlined',
    'QqCircleFilled',
    'QqOutlined',
    'QqSquareFilled',
    'AlipayCircleOutlined',
    'AlipayOutlined',
    'AppleFilled',
    'BankFilled',
    'BankOutlined',
    'BankTwoTone',
    'BilibiliFilled',
    'BilibiliOutlined',
    'BoldOutlined',
    'BugOutlined',
    'CarFilled',
    'CarOutlined',
    'CaretLeftFilled',
    'CaretLeftOutlined',
    'CaretRightFilled',
    'CaretUpOutlined',
    'CarryOutOutlined',
    'CheckCircleOutlined',
    'CheckOutlined',
    'CheckSquareFilled',
    'CheckSquareOutlined',
    'CiCircleFilled',
    'CiCircleOutlined',
    'CiOutlined',
    'CloseCircleFilled',
    'CloseSquareOutlined',
    'CodepenCircleFilled',
    'CodepenCircleOutlined',
    'CodepenOutlined',
    'CodepenSquareFilled',
    'ColumnHeightOutlined',
    'ColumnWidthOutlined',
    'CopyrightCircleFilled',
    'CopyrightCircleOutlined',
    'CopyrightCircleTwoTone',
    'CopyrightOutlined',
    'CopyrightTwoTone',
    'CreditCardOutlined',
    'DeleteColumnOutlined',
    'DeleteFilled',
    'DeleteOutlined',
    'DeleteRowOutlined',
    'DeleteTwoTone',
    'DeliveredProcedureOutlined',
    'DisconnectOutlined',
    'DiscordOutlined',
    'DislikeOutlined',
    'DollarCircleFilled',
    'DoubleRightOutlined',
    'DownSquareOutlined',
    'DownloadOutlined',
    'DribbbleOutlined',
    'DribbbleSquareFilled',
    'DropboxSquareFilled',
    'EditFilled',
    'EllipsisOutlined',
    'EuroCircleFilled',
    'EuroCircleOutlined',
    'EuroCircleTwoTone',
    'ExceptionOutlined',
    'ExclamationCircleFilled',
    'ExclamationCircleOutlined',
    'ExclamationCircleTwoTone',
    'ExclamationOutlined',
    'ExpandAltOutlined',
    'ExpandOutlined',
    'ExportOutlined',
    'EyeFilled',
    'EyeInvisibleFilled',
    'EyeInvisibleOutlined',
    'EyeInvisibleTwoTone',
    'FacebookFilled',
    'FallOutlined',
    'FastBackwardFilled',
    'FastBackwardOutlined',
    'FastForwardFilled',
    'FastForwardOutlined',
    'FieldBinaryOutlined',
    'FieldNumberOutlined',
    'FieldStringOutlined',
    'FileAddFilled',
    'FileAddOutlined',
    'FileAddTwoTone',
    'FileGifOutlined',
    'FileJpgOutlined',
    'FileUnknownFilled',
    'FileUnknownOutlined',
    'FileUnknownTwoTone',
    'FolderAddFilled',
    'FolderAddOutlined',
    'FolderAddTwoTone',
    'FormOutlined',
    'ForwardFilled',
    'ForwardOutlined',
    'FrownFilled',
    'FrownOutlined',
    'FrownTwoTone',
    'FullscreenExitOutlined',
    'GifOutlined',
    'GithubOutlined',
    'GooglePlusOutlined',
    'GoogleCircleFilled',
    'GooglePlusCircleFilled',
    'Html5Filled',
    'Html5Outlined',
    'IeSquareFilled',
    'ImportOutlined',
    'Html5TwoTone',
    'IdcardFilled',
    'IdcardOutlined',
    'InfoCircleFilled',
    'InfoCircleOutlined',
    'InfoCircleTwoTone',
    'InfoOutlined',
    'ItalicOutlined',
    'JavaOutlined',
    'JavaScriptOutlined',
    'KubernetesOutlined',
    'LaptopOutline',
    'LeftCircleFilled',
    'LeftCircleOutlined',
    'LeftCircleTwoTone',
    'LeftOutlined',
    'LinkedinFilled',
    'LinkedinOutlined',
    'LinuxOutlined',
    'LoadingOutlined',
    'Loading3QuartersOutlined',
    'LoginOutlined',
    'LogoutOutlined',
    'ManOutlined',
    'MediumCircleFilled',
    'MediumOutlined',
    'MediumSquareFilled',
    'MediumWorkmarkOutlined',
    'MehFilled',
    'MehOutlined',
    'MehTwoTone',
    'MenuFoldOutlined',
    'MenuOutlined',
    'MenuUnfoldOutlined',
    'MinusCircleFilled',
    'MinusCircleOutlined',
    'MinusCircleTwoTone',
    'MinusOutlined',
    'MoneyCollectFilled',
    'MoneyCollectOutlined',
    'MoneyCollectTwoTone',
    'OrderedListOutlined',
    'PayCircleFilled',
    'PayCircleOutlined',
    'PercentageOutlined',
    'PinterestOutlined',
    'PlusCircleFilled',
    'PlusCircleOutlined',
    'PlusCircleTwoTone',
    'PlusOutlined',
    'PlusSquareFilled',
    'PlusSquareOutlined',
    'PlusSquareTwoTone',
    'PoundCircleFilled',
    'PoundCircleOutlined',
    'PoundCircleTwoTone',
    'PoundOutlined',
    'PropertySafetyFilled',
    'PropertySafetyOutlined',
    'PropertySafetyTwoTone',
    'QuestionCircleFilled',
    'QuestionCircleOutlined',
    'QuestionCircleTwoTone',
    'QuestionOutlined',
    'RedEnvelopeFilled',
    'RedEnvelopeOutlined',
    'RedEnvelopeTwoTone',
    'RedditCircleFilled',
    'RedditOutlined',
    'RedditSquareFilled',
    'RedoOutlined',
    'ReloadOutlined',
    'RestFilled',
    'RestOutlined',
    'RestTwoTone',
    'ShoppingCartOutlined',
    'ShoppingFilled',
    'ShoppingOutlined',
    'ShoppingTwoTone',
    'ShrinkOutlined',
    'SkypeFilled',
    'SkypeOutlined',
    'SlackCircleFilled',
    'SlackOutlined',
    'SlackSquareFilled',
    'SlackSquareOutlined',
    'SmallDashOutlined',
    'SpotifyFilled',
    'SpotifyOutlined',
    'StarFilled',
    'StarOutlined',
    'StarTwoTone',
    'StepBackwardFilled',
    'StepBackwardOutlined',
    'TaobaoCircleFilled',
    'TaobaoCircleOutlined',
    'TaobaoOutlined',
    'TaobaoSquareFilled',
    'TikTokFilled',
    'TikTokOutlined',
    'ToTopOutlined',
    'TwitterSquare',
    'UndoOutlined',
    'VerticalAlignBottomOutlined',
    'VerticalAlignMiddleOutlined',
    'VerticalAlignTopOutlined',
    'WechatFilled',
    'WechatOutlined',
    'WechatWorkFilled',
    'WechatWorkOutlined',
    'WeiboCircleFilled',
    'WeiboCircleOutlined',
    'WeiboOutlined',
    'WeiboSquareOutlined',
    'WindowsFilled',
    'XFilled',
    'YahooFilled',
    'YahooOutlined',
    'YoutubeFilled',
    'YuqueFilled'
  ];

  const icons = React.useMemo(() => {
    return Object.keys(AllIcons)
      .filter((name) => {
        if (name === 'default' || name === 'IconProvider' || blacklist.includes(name)) return false;
        return /^[A-Z].*/.test(name);
      })
      .filter((name) => name.toLowerCase().includes(keyword.toLowerCase()));
  }, [keyword]);

  return (
    <Modal title="选择图标" open={open} onCancel={onClose} footer={null} width={800}>
      <Input
        placeholder="搜索图标名称"
        prefix={<SearchOutlined />}
        allowClear
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        style={{ marginBottom: 12 }}
      />
      <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
        <Row gutter={[8, 8]}>
          {icons.map((name) => {
            const Comp = (AllIcons as any)[name];
            if (!Comp) return null;
            return (
              <Col key={name} span={3} style={{ textAlign: 'center' }}>
                <div
                  style={{
                    padding: 8,
                    border: value === name ? '1px solid #1677ff' : '1px solid transparent',
                    borderRadius: 6,
                    cursor: 'pointer',
                  }}
                  onClick={() => {
                    onSelect(name);
                    onClose();
                  }}
                >
                  <Comp style={{ fontSize: 24 }} />
                  <div style={{ fontSize: 10, marginTop: 6, wordBreak: 'break-word' }}>{name}</div>
                </div>
              </Col>
            );
          })}
        </Row>
      </div>
    </Modal>
  );
};

export default IconPicker;
