'use client';

import React, { useRef, useEffect, useState, FC } from 'react';
import { createPortal } from 'react-dom';

import { IPortal } from '../../interfaces/portal';

export const Portal: FC<IPortal> = (props) => {
  const ref = useRef<Element | null>(null);
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    if (mounted && !props.portalOpen && props.closeTime > 0) {
      const timeoutId = setTimeout(() => {
        setMounted(false);
        ref.current = null;
      }, props.closeTime);

      return () => clearTimeout(timeoutId);
    } else if (mounted && !props.portalOpen) {
      setMounted(false);
      ref.current = null;
    } else if (!mounted && props.portalOpen) {
      ref.current = document.querySelector<HTMLElement>(
        props.portalTag ?? '#portal',
      );
      setMounted(true);
    }
  }, [mounted, props.closeTime, props.portalOpen, props.portalTag]);

  if (!mounted && !ref.current) return null;

  return createPortal(
    <div className="transition-all delay-100 fixed top-0 left-0 w-full h-full grid place-items-center bg-black bg-opacity-40 z-20">
      {props.children}
    </div>,
    ref.current!,
  );
};