/** @format */

import './style/index.less';

import { Modal } from 'antd';
import React, { useEffect, useState } from 'react';

import { RESIZE_MODAL_CLASS_NAME } from '../../hooks/useScaleModal';

/**
 * @description 模态框
 */

interface CustomModalProps {
  title?: string;
  visible: boolean;
  [key: string]: any;
  children: any;
}

const CustomModal = (props: CustomModalProps) => {
  const { title, visible, children, ...otherProps } = props;
  const [containerDom, setContainerDom] = useState(
    document.getElementById('dashboard') || document.body,
  );

  const modalProps = {
    title,
    visible,
    centered: true,
    footer: null,
    className: 'edata-custom-modal',
    wrapClassName: RESIZE_MODAL_CLASS_NAME,
    ...otherProps,
  };

  useEffect(() => {
    function handleResize() {
      const dom = document.getElementById('dashboard');
      if (dom) {
        const clientRect = dom.getBoundingClientRect();
        if (clientRect.height === window.innerHeight) {
          setContainerDom(dom);
        } else {
          setContainerDom(document.body);
        }
      } else {
        setContainerDom(document.body);
      }
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  if (!visible) {
    return null;
  }

  return (
    <Modal {...modalProps} getContainer={() => containerDom}>
      {children}
    </Modal>
  );
};

export default CustomModal;