import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { Modal } from 'antd'
import Button from '../Button/Button'
import './ConfirmModal.less'

function ConfirmModal({
  children,
  icon,
  title,
  okText,
  cancelText,
  onCancel,
  description,
  onConfirm,
  visible,
  showConfirmLoading,
  width,
  centered,
  closable,
  isDangerConfirm,
  className,
}) {
  return (
    <Modal
      footer={null}
      className={classNames('confirm-modal', {
        'confirm-modal--with-icon': icon,
        [className]: !!className,
      })}
      width={width}
      centered={centered}
      visible={visible}
      closable={closable}
      onCancel={onCancel}>
      <div className="confirm-modal-body">
        {icon && <div className="confirm-modal-icon">{icon}</div>}
        {title && <h3 className="confirm-modal-title">{title}</h3>}
        {description && <p className="confirm-modal-description">{description}</p>}
        {children && <div className="confirm-modal-content">{children}</div>}
        <div className="confirm-modal-buttons">
          <Button cancel title={cancelText} onClick={onCancel} />
          <Button
            title={okText}
            red={isDangerConfirm}
            onClick={onConfirm}
            loading={showConfirmLoading}
          />
        </div>
      </div>
    </Modal>
  )
}

ConfirmModal.propTypes = {
  children: PropTypes.node,
  icon: PropTypes.node,
  okText: PropTypes.string,
  cancelText: PropTypes.string,
  onCancel: PropTypes.func.isRequired,
  onConfirm: PropTypes.func.isRequired,
  visible: PropTypes.bool.isRequired,
  showConfirmLoading: PropTypes.bool,
  title: PropTypes.string,
  description: PropTypes.string,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  centered: PropTypes.bool,
  closable: PropTypes.bool,
  isDangerConfirm: PropTypes.bool,
  className: PropTypes.string,
}

ConfirmModal.defaultProps = {
  icon: null,
  okText: 'OK',
  cancelText: 'Cancel',
  showConfirmLoading: false,
  title: null,
  description: null,
  children: null,
  width: 400,
  centered: false,
  closable: false,
  isDangerConfirm: true,
  className: null,
}

export default ConfirmModal