import React, { useEffect, useRef, useState } from "react"
import { Modal } from "antd"
import { ModalProps } from "antd/lib/modal";
import { handleGetFinalHideState, handleGetFinalHideUrl, handleGetFinalState, handleGetFinalUrl, handleGetStateIndex } from "../../utils/utils";

const MobileModal: React.FC<ModalProps> = (props) => {
  const { onCancel, onOk, afterClose, visible, children, ...restProps } = props;
  // const [eventKey, setEventKey] = useState('');
  const eventKeyRef = useRef('');


  const handleCloseByState = (e) => {
    handleClose(e, true);
  }
  const handleClose = (e?, isStateClose?: boolean) => {
    // e?.preventDefault();
    // e?.stopPropagation();
    // setTimeout(() => {
      // if (location.href.includes('?drawer=')) {
        // const closeHref = location.href.split('?')[0];
        // const closeHref = handleGetFinalHideUrl();
        const { state, path } = handleGetFinalHideState();
        // const closeHref = location.href;
        // const isPreview = closeHref.includes('?drawer=');
        // console.log('debug-mobileModal-关闭Modal',`绑定的eventKey: ${eventKeyRef.current}`, `isStateClose:${isStateClose}` ,path, state);

        // history.replaceState({ isPreview }, '', closeHref);
        // 模拟返回
        // history.back();
        // history.pushState({ isPreview }, '', closeHref);
        // if (isPreview) {
        //   history.pushState({ isPreview }, '', closeHref);
        // } else {
          // history.replaceState({ isPreview }, '', closeHref);
          // }
          // }
          if (!isStateClose) {
            history.back();
          } else {
            history.replaceState(state, '', path);
          }
          window.removeEventListener(eventKeyRef.current, handleClose);
          window.dispatchEvent(new Event('historyChange'));
          onCancel?.(e);

        // }, 300);
  }
  const handleModalShow = () => {
    // const targetHref = handleGetFinalUrl(location.href, 'modal');
    // const isPreview = targetHref.includes('?drawer=');
    // 在显示的时候挂载关闭事件
    const index = handleGetStateIndex('modal');
    const eventKey = `CLOSE_MODAL_${index}`;
    // setEventKey(eventKey);
    eventKeyRef.current = eventKey;
    // console.log('debug-挂载的Modal的key', eventKey);
    window.addEventListener(eventKey, handleCloseByState);


    const { state, path } = handleGetFinalState(location.href, 'modal');
    // console.log('debug-打开Modal', state, path);
    // history?.pushState({ isPreview }, '', targetHref);
    // if (!history.state?.['isPreview']) {
    //   history.pushState({ isPreview }, '', targetHref);
    // } else {
    //   if (isPreview) {
    //     history.pushState({ isPreview }, '', targetHref);
    //   } else {
    //     history.replaceState({ isPreview }, '', targetHref);
    //   }
    // }
    history.pushState(state, '', path);
    window.dispatchEvent(new Event('historyChange'));

    // window.addEventListener(eventKey, handleCloseByState);
  }

  const handleAfterConfirm = (e) => {
    // afterClose?.();
    onOk?.(e);
    handleClose();
  }

  useEffect(() => {
    return () => {
      window.removeEventListener(eventKeyRef.current, handleCloseByState);
    }
  }, []);
  useEffect(() => {
    if (visible) {
      handleModalShow();
    }
  }, [visible])
  return (
    <Modal
      {...restProps}
      visible={visible}
      onCancel={handleClose}
      onOk={handleAfterConfirm}
    // afterClose={handleAfterClose}
    >{children}</Modal>
  )
}

export default MobileModal