import { node } from 'prop-types';
import { useRef } from 'react';
import { createPortal } from 'react-dom';
import useUpdateEffect from '../../hooks/useUpdateEffect';

function Portal({ children }) {
  const mountNode = useRef();
  if (!mountNode.current) {
    mountNode.current = document.createElement('div');
  }

  useUpdateEffect((didUpdate) => {
    if (!didUpdate) {
      document.body.appendChild(mountNode.current);
    }

    return () => {
      document.body.removeChild(mountNode.current);
    };
  }, []);

  return createPortal(children, mountNode.current);
}

Portal.propTypes = {
  children: node.isRequired,
};

export default Portal;