import React, { useEffect, FC } from 'react';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Modal } from '@easyv/antd';
import styles from './index.less';
import classnames from 'classnames';
import EasyvButton from 'components/EasyvButton';

interface ModalProps {
  visible: boolean;
  title?: string | React.ReactNode;
  tip?: string | React.ReactNode;
  theme?: 'black' | 'white';
  tipTitle?: string | React.ReactNode;
  disabled?: boolean;
  footerBtnStyle?: React.CSSProperties;
  onClose: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  onOk: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
}

const CustomModal: FC<ModalProps> = ({
  visible,
  title = '删除',
  tip = '此操作执行后不可逆，是否确认删除?',
  disabled = false,
  theme = 'white',
  tipTitle = '提示',
  footerBtnStyle = {},
  onClose,
  onOk,
  ...props
}) => {
  useEffect(() => {
    const onConfirm = (e) => {
      if (visible && e && e.keyCode == 13) {
        onOk(e);
      }
    };

    document.addEventListener('keydown', onConfirm, false);

    return () => {
      document.removeEventListener('keydown', onConfirm, false);
    };
  }, [visible]);

  return (
    <Modal
      {...props}
      className={styles[theme]}
      wrapClassName={classnames([styles.modalContainer])}
      visible={visible}
      title={title}
      width={400}
      closable={false}
      footer={null}
      onCancel={onClose}>
      <div className={classnames([styles.tipContainer, styles.tipContainerBlack])}>
        <div className={styles.tipTitleContainer}>
          <ExclamationCircleFilled className={styles.tipIcon} />
          <span className={styles.tipTitle}>{tipTitle}</span>
        </div>
        <span className={styles.tipContent}>{tip}</span>
      </div>
      <div className={classnames([styles.modalFooter])}>
        <EasyvButton theme="default" onClick={onClose}>
          取消
        </EasyvButton>
        <EasyvButton theme="danger" danger onClick={onOk} style={{ border: 'none', ...footerBtnStyle }} disabled={disabled}>
          删除
        </EasyvButton>
      </div>
    </Modal>
  );
};

export default CustomModal;
