import React, { useCallback, useContext, useRef, useState } from 'react';
import { PortalContext } from '../../core/portal/portal-host';
import FloatingLayer from './FloatingLayer';
import type { FloatingLayerProps } from './interface';

// 管理当前 Host 内所有 FloatingLayer 的可见性，用于实现 close/closeAll
const useFloatingLayer = () => {
  const portal = useContext(PortalContext);
  const groupMapRef = useRef(
    new Map<number, { setVisible?: (visible: boolean) => void }>()
  );

  const remove = useCallback(
    (key: number) => {
      portal.unmount(key);
      groupMapRef.current.delete(key);
    },
    [portal]
  );

  const FloatingLayerInstanceInContext: React.FC<
    FloatingLayerProps & { floatkey: number }
  > = ({ floatkey, ...options }) => {
    const [visible, setVisible] = useState(true);

    React.useEffect(() => {
      groupMapRef.current.set(floatkey, { setVisible });
      return () => {
        groupMapRef.current.delete(floatkey);
      };
    }, [floatkey]);

    return (
      <FloatingLayer
        {...options}
        visible={visible}
        onClosed={() => remove(floatkey)}
        onPressOverlay={() => {
          options.onPressOverlay?.();
          if (options.closeOnPressOverlay) {
            const item = groupMapRef.current.get(floatkey);
            item?.setVisible?.(false);
          }
        }}
      />
    );
  };

  const open = useCallback(
    (options: FloatingLayerProps) => {
      // 在当前 Host 内挂载，返回 key
      const key = portal.mount(null);
      portal.update(
        key,
        <FloatingLayerInstanceInContext {...options} floatkey={key} />
      );

      return {
        key,
        close: () => {
          const item = groupMapRef.current.get(key);
          item?.setVisible?.(false);
        },
      };
    },
    [portal]
  );

  const closeAll = useCallback(() => {
    groupMapRef.current.forEach((item) => item.setVisible?.(false));
  }, []);

  return { open, closeAll };
};

export default useFloatingLayer;