import React, { useEffect, useState } from 'react';
import Portal from '../portal';

export const generateKeyManage = () => {
  let protalTag: string;

  const groupMap = new Map<
    number,
    { setVisible?: (visible: boolean) => void }
  >();

  const setProtalTag = (tag: string) => {
    protalTag = tag;
  };

  const add = () => {
    const key = Portal.add(null, protalTag);
    groupMap.set(key, {});
    return key;
  };

  const update = (key: number, children: React.ReactNode) => {
    Portal.update(key, children, protalTag);
  };

  const close = (key: number) => {
    const item = groupMap.get(key);
    if (item?.setVisible) {
      item.setVisible(false);
    }
  };

  const closeAll = () => {
    groupMap.forEach((item) => {
      if (item.setVisible) {
        item.setVisible(false);
      }
    });
  };

  const remove = (key: number) => {
    // 关闭动画结束后，通过 onClosed 调用到此方法，真正移除对应的 Portal 节点
    Portal.remove(key, protalTag);
    groupMap.delete(key);
  };

  const removeAll = () => {
    // 移除所有 Portal 节点，避免不可见节点堆积
    groupMap.forEach((_, k) => {
      Portal.remove(k, protalTag);
    });
    groupMap.clear();
  };

  return {
    groupMap,
    add,
    close,
    closeAll,
    remove,
    update,
    removeAll,
    setProtalTag,
  };
};

export const useVisibleManage = (
  groupMap: Map<number, { setVisible?: (visible: boolean) => void }>,
  key: number
) => {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    groupMap.set(key, { setVisible });
    return () => {
      groupMap.delete(key);
    };
  }, []);

  return {
    visible,
    setVisible,
  };
};