import React, { useContext, useEffect, memo } from 'react';
import usePrevious from 'react-use/lib/usePrevious';
import { fp as _ } from '../fp';
import { PortalContext } from './portal-context';

type TProps = {
  updateIfAnyChanged?: Record<string, unknown>;
  id: string;
  children: React.ReactElement | React.ReactElement[];
};

export const Portal: React.FC<TProps> = memo(props => {
  const { children, updateIfAnyChanged, id } = props;
  const { teleport, unload } = useContext(PortalContext);

  const prevProps = usePrevious(updateIfAnyChanged);

  useEffect(() => {
    teleport({ id, children });
    return () => {
      unload(id);
    };
  }, []);

  useEffect(() => {
    if (_.isEqual(prevProps, updateIfAnyChanged)) return;
    teleport({ id, children });
  }, [updateIfAnyChanged]);

  return null;
});