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

interface IProps {
  className?: string;
  title?: string;
  tip?: string | React.ReactNode;
  disabled?: boolean;
  onOk: () => void;
}

export default class DeleteConfirmModal extends Component<IProps, { visible: boolean }> {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
  }

  componentDidMount() {
    document.addEventListener('keydown', this.confirm, false);
  }

  confirm = (e) => {
    if (this.state.visible && e && e.keyCode == 13) {
      this.onOk();
    }
  };

  onOk = () => {
    this.setState(
      {
        visible: false
      },
      () => {
        this.props.onOk();
      }
    );
  };
  showModal = (e) => {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      visible: true
    });
  };
  onCancel = (e) => {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      visible: false
    });
  };

  componentWillUnmount() {
    document.removeEventListener('keydown', this.confirm);
  }

  render() {
    const { className, title = '删除应用', tip = '此操作执行后不可逆，是否确认将对应文件删除?', disabled } = this.props;
    return (
      <span className={className}>
        <span onClick={disabled ? undefined : this.showModal}>{this.props.children}</span>
        <Modal
          wrapClassName={styles.modalContainer}
          visible={this.state.visible}
          closable={false}
          width={520}
          footer={null}
          onCancel={this.onCancel}>
          <div className={styles.tipContainer}>
            <div className={styles.tipTitleContainer}>
              <ExclamationCircleFilled className={styles.tipIcon} />
              <span className={styles.tipTitle}>{title}</span>
            </div>
            <span className={styles.tipContent}>{tip}</span>
          </div>
          <div className={styles.modalFooter}>
            <EasyvButton theme="default" onClick={this.onCancel}>
              取消
            </EasyvButton>
            <EasyvButton theme="danger" onClick={this.onOk} style={{ border: 'none' }}>
              删除
            </EasyvButton>
          </div>
        </Modal>
      </span>
    );
  }
}
