import { ConfigProvider, ModalProps, Modal as OldModal } from 'antd';
import React, { useContext, useMemo, useRef } from 'react';
import { Icon } from '../Icon';
import { Button } from '../Button';
import Confirm, { ModalStaticFunctions, modalGlobalConfig } from './confirm';
import classNames from 'classnames';
import './index.less';
import { translate } from '../utils/index';

export interface ModalExtraProps {
  type?: 'default' | 'biggest';
  noContent?: boolean;
}

const OriginModal = ({
  className = '',
  type = 'default',
  width,
  closeIcon = null,
  footer = undefined,
  cancelText = null,
  cancelButtonProps = null,
  confirmLoading = false,
  okButtonProps = null,
  okText = null,
  okType = 'primary',
  noContent = false,
  style,
  ...props
}: ModalExtraProps & ModalProps) => {
  // 为了与 antd 的生态保持兼容性，我们要求必须要使用 `.@{ant-prefix}` 变量来生成类名
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-modal');
  const closeIconRef = useRef(
    closeIcon || (
      <Icon
        style={{ fontSize: '20px', color: 'var(--caption-font)' }}
        iconName="CloseSmall"
      />
    ),
  );
  const { locale } = useContext(ConfigProvider.ConfigContext);

  const DefaultFooter = useMemo(() => {
    return footer === undefined ? (
      <div className={`${prefixCls}-footer`}>
        <Button
          key="cancel"
          type="secondary"
          onClick={props.onCancel}
          size="middle"
          {...cancelButtonProps}
        >
          {cancelText ||
            translate(
              'packages.base.src.Notification.index.取消',
              locale?.locale,
            )}
        </Button>
        <Button
          size="middle"
          key="ok"
          onClick={props.onOk}
          loading={confirmLoading}
          type={okType || 'primary'}
          className={`${prefixCls}-footer-okBtn`}
          {...okButtonProps}
        >
          {okText ||
            translate('packages.base.src.Modal.index.确认', locale?.locale)}
        </Button>
      </div>
    ) : (
      footer
    );
  }, [footer, cancelText, okText, props.onCancel, props.onOk, confirmLoading]);

  const getStyle = () => {
    return props.centered ? {} : style || { top: '20%' };
  };
  const defaultStyle = useMemo(() => {
    if (width) {
      return {
        width,
      };
    }
    const widths = {
      default: '480px',
      biggest: '960px',
    };
    return { maxWidth: widths[type], minWidth: '320px' };
  }, [type, width]);

  return (
    <OldModal
      {...props}
      width={width}
      style={{ ...getStyle(), ...defaultStyle }}
      closeIcon={closeIconRef.current}
      footer={DefaultFooter}
      className={classNames(
        `${prefixCls}-box`,
        `${prefixCls}-box--${type}`,
        {
          [`${prefixCls}-noContent`]: noContent,
          [`${prefixCls}-noFooter`]: footer === null,
        },
        className,
      )}
    />
  );
};

type ModalType = typeof OriginModal &
  ModalStaticFunctions & {
    useModal: typeof OldModal.useModal;
    destroyAll: () => void;
    config: typeof modalGlobalConfig;
  };

const Modal = OriginModal as ModalType;

Modal.info = Confirm.info;
Modal.warning = Confirm.warning;
Modal.warn = Confirm.warn;
Modal.success = Confirm.success;
Modal.error = Confirm.error;
Modal.confirm = Confirm.confirm;

Modal.useModal = OldModal.useModal;

export { Modal };