import React from 'react';

import { FloatingLayerProps } from './interface';
import FloatingLayer from './FloatingLayer';
import {
  generateKeyManage,
  useVisibleManage,
} from '../../core/hooks/useVisibleManage';

const floatManage = generateKeyManage();

const FloatingLayerInstance = ({
  floatkey,
  ...options
}: FloatingLayerProps & { floatkey: number }) => {
  const { visible } = useVisibleManage(floatManage.groupMap, floatkey);
  return (
    <FloatingLayer
      {...options}
      visible={visible}
      onClosed={() => floatManage.remove(floatkey)}
      onPressOverlay={() => {
        options.onPressOverlay?.();
        if (options.closeOnPressOverlay) {
          floatManage.close(floatkey);
        }
      }}
    />
  );
};

export const Instance = (options: FloatingLayerProps) => {
  if (options.portalTag) {
    floatManage.setProtalTag(options.portalTag);
  }
  const floatkey = floatManage.add();

  floatManage.update(
    floatkey,
    <FloatingLayerInstance {...options} floatkey={floatkey} />
  );

  return {
    key: floatkey,
    close: () => {
      floatManage.close(floatkey);
    },
  };
};

export const close = floatManage.close;
export const closeAll = floatManage.closeAll;