import Icon from '@ant-design/icons';
import { Modal } from 'antd';
import React from 'react';
import IconMap from '@/components/Icon/IconMap';
import styles from './index.less';

interface dataProps {
  visible: boolean;
  onSelected: (item: any) => void;
}

/**
 * 图标选择器
 * @param props
 * @constructor
 */
const IconSelector: React.FC<dataProps> = (props) => {
  const { visible, onSelected } = props;
  const iconNames = Object.keys(IconMap);

  /**
   * 选中图标后
   */
  const onIconClick = (item: React.Key | null | undefined) => {
    onSelected(item);
  };

  return (
    <Modal
      title="图标选择"
      footer={null}
      open={visible}
      width={900}
      bodyStyle={{ height: 600, overflowY: 'auto' }}
      onCancel={onSelected}
    >
      {iconNames &&
        iconNames.map((item: any) => {
          return (
            <Icon
              className={styles.iconItem}
              key={item}
              component={IconMap[item] as React.ForwardRefExoticComponent<any>}
              onClick={() => {
                onIconClick(item);
              }}
            />
          );
        })}
    </Modal>
  );
};
export default IconSelector;