import * as React from 'react';
// import Dialog from 'rc-dialog';
import Dialog from './DialogWrap';
// import DialogWrap from './DialogWrap'
import classNames from 'classnames';
import {CloseOutlined} from '@ant-design/icons';

import useModal from 'antd/lib/modal/useModal';
import { getConfirmLocale } from 'antd/lib/modal/locale';
import {Button} from 'antd';
import { LegacyButtonType, ButtonProps, convertLegacyProps } from 'antd/lib/button/button';
import LocaleReceiver from 'antd/lib/locale-provider/LocaleReceiver';
import { ConfigContext, DirectionType } from 'antd/lib/config-provider';
import { canUseDocElement } from 'antd/lib/_util/styleChecker';
import { getTransitionName } from 'antd/lib/_util/motion';
import "antd/lib/modal/style/index"
import "./style/index.less"
let mousePosition: { x: any; y: any } | null;
// let mousePosition: any;
export const destroyFns: Array<() => void> = [];

// ref: https://github.com/ant-design/ant-design/issues/15795
const getClickPosition = (e: MouseEvent) => {
  mousePosition = {
    x: e.pageX,
    y: e.pageY,
  };
  // 100ms 内发生过点击事件，则从点击位置动画展示
  // 否则直接 zoom 展示
  // 这样可以兼容非点击方式展开
  setTimeout(() => {
    mousePosition = null;
  }, 100);
};

// 只有点击事件支持从鼠标位置动画展开
if (canUseDocElement()) {
  document.documentElement.addEventListener('click', getClickPosition, true);
}

export interface ModalProps {
  /** 对话框是否可见 */
//   visible?: boolean;
//   /** 确定按钮 loading */
//   confirmLoading?: boolean;
//   /** 标题 */
//   title?: React.ReactNode | string;
//   /** 是否显示右上角的关闭按钮 */
//   closable?: boolean;
//   /** 点击确定回调 */
//   onOk?: (e: React.MouseEvent<HTMLElement>) => void;
//   /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
//   onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
//   afterClose?: () => void;
//   /** 垂直居中 */
//   centered?: boolean;
//   /** 宽度 */
//   width?: string | number;
//   /** 高度 */
//   height?: string | number;
//   /** 调整后的最小高度 */
//   reszieMinHeight?: number;
//   /** 调整后的最小宽度 */
//   reszieMinWidth?: number;
//   /** 底部内容 */
//   footer?: React.ReactNode;
//   /** 确认按钮文字 */
//   okText?: React.ReactNode;
//   /** 确认按钮类型 */
//   okType?: LegacyButtonType;
//   /** 取消按钮文字 */
//   cancelText?: React.ReactNode;
//   /** 点击蒙层是否允许关闭 */
//   maskClosable?: boolean;
//   /** 强制渲染 Modal */
//   forceRender?: boolean;
//   okButtonProps?: ButtonProps;
//   cancelButtonProps?: ButtonProps;
//   destroyOnClose?: boolean;
//   style?: React.CSSProperties;
//   wrapClassName?: string;
//   maskTransitionName?: string;
//   transitionName?: string;
//   className?: string;
// //   getContainer?: string | HTMLElement | getContainerFunc | false | null;
//   getContainer?: any;
//   zIndex?: number;
//   bodyStyle?: React.CSSProperties;
//   maskStyle?: React.CSSProperties;
//   mask?: boolean;
//   keyboard?: boolean;
//   wrapProps?: any;
//   prefixCls?: string;
//   closeIcon?: React.ReactNode;
//   modalRender?: (node: React.ReactNode) => React.ReactNode;
//   focusTriggerAfterClose?: boolean;
//   /** 弹框位置是否可以拖动 */
//   dragable: boolean
//   /** 弹框大小是否可以调整 */ 
//   resizable: boolean
//   /** 重新打开时是否重新水平垂直居中 */
//   autoCenterWhenReOpen: boolean
//   /** 重新打开时是否重置为原始设定的宽高值 */
//   autoResetWhenReOpen: boolean
  [propName: string]: any;

}

type getContainerFunc = () => HTMLElement;

export interface ModalFuncProps {
  prefixCls?: string;
  className?: string;
  visible?: boolean;
  title?: React.ReactNode;
  closable?: boolean;
  content?: React.ReactNode;
  // TODO: find out exact types
  onOk?: (...args: any[]) => any;
  onCancel?: (...args: any[]) => any;
  afterClose?: () => void;
  okButtonProps?: ButtonProps;
  cancelButtonProps?: ButtonProps;
  centered?: boolean;
  width?: string | number;
  height?: string | number;
  okText?: React.ReactNode;
  okType?: LegacyButtonType;
  cancelText?: React.ReactNode;
  icon?: React.ReactNode;
  mask?: boolean;
  maskClosable?: boolean;
  zIndex?: number;
  okCancel?: boolean;
  style?: React.CSSProperties;
  maskStyle?: React.CSSProperties;
  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
  keyboard?: boolean;
  getContainer?: string | HTMLElement | getContainerFunc | false | null;
  autoFocusButton?: null | 'ok' | 'cancel';
  transitionName?: string;
  maskTransitionName?: string;
  direction?: DirectionType;
  bodyStyle?: React.CSSProperties;
  closeIcon?: React.ReactNode;
  modalRender?: (node: React.ReactNode) => React.ReactNode;
  focusTriggerAfterClose?: boolean;
}

export interface ModalLocale {
  okText: string;
  cancelText: string;
  justOkText: string;
}

interface ModalInterface extends React.FC<ModalProps> {
  useModal: typeof useModal;
}

const Modal: ModalInterface = props => {
  const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(
    ConfigContext,
  );

  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
    const { onCancel } = props;
    onCancel?.(e);
  };

  const handleOk = (e: React.MouseEvent<HTMLButtonElement>) => {
    const { onOk } = props;
    onOk?.(e);
  };

  const renderFooter = (locale: ModalLocale) => {
    const { okText, okType, cancelText, confirmLoading } = props;
    return (
      <>
        <Button onClick={handleCancel} {...props.cancelButtonProps}>
          {cancelText || locale.cancelText}
        </Button>
        <Button
          {...convertLegacyProps(okType)}
          loading={confirmLoading}
          onClick={handleOk}
          {...props.okButtonProps}
        >
          {okText || locale.okText}
        </Button>
      </>
    );
  };

  const {
    prefixCls: customizePrefixCls,
    footer,
    visible,
    wrapClassName,
    centered,
    getContainer,
    closeIcon,
    focusTriggerAfterClose = true,
    ...restProps
  } = props;
  const prefixCls = getPrefixCls('modal', customizePrefixCls);
  const rootPrefixCls = getPrefixCls();

  const defaultFooter = (
    <LocaleReceiver componentName="Modal" defaultLocale={getConfirmLocale()}>
      {renderFooter}
    </LocaleReceiver>
  );

  const closeIconToRender = (
    <span className={`${prefixCls}-close-x`}>
      {closeIcon || <CloseOutlined className={`${prefixCls}-close-icon`} />}
    </span>
  );

  const wrapClassNameExtended = classNames(wrapClassName, {
    [`${prefixCls}-centered`]: !!centered,
    [`${prefixCls}-wrap-rtl`]: direction === 'rtl',
  });
  return (
    <Dialog
      {...restProps}
      getContainer={getContainer === undefined ? getContextPopupContainer : getContainer}
      prefixCls={prefixCls}
      wrapClassName={wrapClassNameExtended}
      footer={footer === undefined ? defaultFooter : footer}
      visible={visible}
      mousePosition={mousePosition}
      onClose={handleCancel}
      closeIcon={closeIconToRender}
      focusTriggerAfterClose={focusTriggerAfterClose}
      transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
      maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
    />
  );
};

Modal.useModal = useModal;

Modal.defaultProps = {
    height: 400,
    width: 520,
    reszieMinHeight:200,
    reszieMinWidth:300,
    confirmLoading: false,
    visible: false,
    okType: 'primary' as LegacyButtonType,
    dragable:false,
    resizable:false,
    autoCenterWhenReOpen:true,
    autoResetWhenReOpen:false,
};

export default Modal;