import React, { memo, ReactNode } from 'react';
import { Modal } from '@easyv/antd';
import classnames from 'classnames';
import styles from './index.less';
import EasyvButton from 'components/EasyvButton';

interface ConfirmProps {
  width?: number | string;
  visible: boolean;
  title?: string | React.ReactNode;
  cancelText?: string;
  okText?: string;
  theme?: 'black' | 'white';
  onClose?: (any) => void;
  onCancel?: (any) => void;
  onOk?: (any) => void;
  okDisabled?: boolean;
  wrapClassName?: string;
  cancelDisabled?: boolean;
  footer?: boolean | React.ReactNode;
  maskClosable?: boolean;
  confirmLoading?: boolean;
  contentStyle?: any;
  children: ReactNode;
  destroyOnClose?: boolean;
  getContainer?: HTMLElement | false;
  className?: string;
}

function ConfirmModal({
  children,
  width = 520,
  okText = '确认',
  cancelText = '取消',
  onCancel,
  onClose = onCancel,
  onOk,
  theme = 'white',
  okDisabled,
  cancelDisabled,
  footer,
  maskClosable = false,
  confirmLoading,
  contentStyle = {},
  getContainer = document.body,
  destroyOnClose = false,
  className,
  ...props
}: ConfirmProps) {
  return (
    <Modal
      {...props}
      destroyOnClose={destroyOnClose}
      getContainer={getContainer}
      maskClosable={maskClosable}
      footer={null}
      className={classnames([styles.modalContainer, styles[theme]], className)}
      width={width}
      onCancel={onClose}>
      <div className={classnames(styles.modalContent, 'easyvModalContainer')} style={contentStyle}>
        {children}
      </div>
      {footer &&
        (footer === true ? (
          <div className={styles.modalFooter}>
            {cancelText && (
              <EasyvButton theme="default" onClick={onCancel} disabled={cancelDisabled}>
                {cancelText}{' '}
              </EasyvButton>
            )}
            <EasyvButton theme="primary" onClick={onOk} disabled={okDisabled || confirmLoading} loading={confirmLoading}>
              {okText}{' '}
            </EasyvButton>
          </div>
        ) : (
          footer
        ))}
    </Modal>
  );
}

export default memo(ConfirmModal);
