/** @format */
import { useLayoutEffect } from 'react';
import useWindowResize from './useWindowResize';

export const RESIZE_MODAL_CLASS_NAME = 'edata-scalable-modal';

/**
 * 可伸缩模态框，以baseHeight为基准根据当前的innerHeight计算缩放比
 * @param dependence
 * @param baseHeight
 */
function useScaleModal(dependence: any[] = [], baseHeight = 1080) {
  function resizeModal() {
    const modalDomArr: any = document.getElementsByClassName(
      RESIZE_MODAL_CLASS_NAME,
    );
    for (let index = 0; index < modalDomArr.length; index++) {
      const modalDom = modalDomArr[index];
      if (modalDom && modalDom.style.display !== 'none') {
        modalDom.style = `transform: scale(${window.innerHeight /
          baseHeight});transform-origin: center;overflow: hidden;`;
      }
    }
  }

  useWindowResize(resizeModal);

  useLayoutEffect(() => {
    resizeModal();
  }, dependence);

  return null;
}

export default useScaleModal;