import React from 'react';
import AntdModal from 'antd/es/modal';
import classnames from 'classnames';

import { antPrefix, getPrefixCls } from '../config-provider';
import Icons from '../icons';
import './index.less';

const {
  CloseCircleIcon,
  InfoCircleIcon,
  QuestionCircleIcon,
  CheckCircleIcon,
  WarningCircleIcon,
  WaitingCircleFillIcon,
  CloseIcon,
} = Icons;

const getButtonsProps = (
  okButtonProps = {},
  cancelButtonProps = {},
  showOkBtn,
  showCancelBtn,
) => {
  const {
    cancelButtonStyle = {},
    ...restCancelButtonProps
  } = cancelButtonProps;
  const { okButtonStyle = {}, ...restOkButtonProps } = okButtonProps;
  const { display, ...restCancelButtonStyle } = cancelButtonStyle;
  const { display: okButtonDisplay, ...restOkButtonStyle } = okButtonStyle;
  return {
    okButtonProps: {
      ...restOkButtonProps,
      prefixCls: `${antPrefix}-btn`,
      style: {
        display: showOkBtn ? 'inline-block' : 'none',
        ...restOkButtonStyle,
      },
    },
    cancelButtonProps: {
      ...restCancelButtonProps,
      prefixCls: `${antPrefix}-btn`,
      style: {
        display: showCancelBtn ? 'inline-block' : 'none',
        ...restCancelButtonStyle,
      },
    },
  };
};

const Modal = ({
  prefixCls: customizePrefixCls,
  okButtonProps,
  cancelButtonProps,
  showCancelBtn = true,
  showOkBtn = true,
  ...restProps
}) => {
  return (
    <AntdModal
      closeIcon={<CloseIcon />}
      prefixCls={getPrefixCls('modal', customizePrefixCls)}
      {...getButtonsProps(
        okButtonProps,
        cancelButtonProps,
        showOkBtn,
        showCancelBtn,
      )}
      {...restProps}
    />
  );
};

Modal.confirm = ({
  prefixCls: customizePrefixCls,
  okButtonProps,
  cancelButtonProps,
  showCancelBtn = true,
  showOkBtn = true,
  ...restProps
}) => {
  return AntdModal.confirm({
    width: 428,
    okText: '确定',
    cancelText: '取消',
    icon: <QuestionCircleIcon fill="currentColor" fontSize="inherit" />,
    ...restProps,
    prefixCls: getPrefixCls('modal', customizePrefixCls),
    ...getButtonsProps(
      okButtonProps,
      cancelButtonProps,
      showOkBtn,
      showCancelBtn,
    ),
  });
};

// 使用 Modal.confirm 重写 info、success、error、warning
Modal.info = ({ className, ...restProps }) =>
  Modal.confirm({
    icon: <InfoCircleIcon fill="currentColor" fontSize="inherit" />,
    ...restProps,
    className: classnames(className, `${antPrefix}-modal-confirm-info`),
  });

Modal.success = ({ className, ...restProps }) =>
  Modal.confirm({
    icon: <CheckCircleIcon fill="currentColor" fontSize="inherit" />,
    ...restProps,
    className: classnames(className, `${antPrefix}-modal-confirm-success`),
  });

Modal.error = ({ className, ...restProps }) =>
  Modal.confirm({
    icon: <CloseCircleIcon fill="currentColor" fontSize="inherit" />,
    ...restProps,
    className: classnames(className, `${antPrefix}-modal-confirm-error`),
  });

Modal.warning = ({ className, ...restProps }) =>
  Modal.confirm({
    icon: <WarningCircleIcon fill="currentColor" fontSize="inherit" />,
    ...restProps,
    className: classnames(className, `${antPrefix}-modal-confirm-warning`),
  });

// 基于 Modal.confirm 封装的自定义等待加载弹窗
Modal.waiting = ({ className, ...restProps }) =>
  Modal.confirm({
    className: classnames(className, `${antPrefix}-modal-confirm-waiting`),
    icon: <WaitingCircleFillIcon fill="currentColor" fontSize="inherit" />,
    title: '操作进行中…',
    showCancelBtn: false,
    okText: '知道了',
    okButtonProps: { type: 'default' },
    ...restProps,
  });

export default Modal;