import React, { useEffect, useRef, useState } from 'react';

export interface IFade {
  children: React.ReactNode;
  in: boolean;
  mountOnEnter?: boolean;
  unmountOnExit?: boolean;
}
export const Fade: React.FC<IFade> = (props) => {
  const [mounted, setMounted] = useState(false);
  const refFade = useRef(null);
  const timeout = 300;

  useEffect(() => {
    if (!props.mountOnEnter && !props.unmountOnExit) {
      setMounted(true);
    }
  }, []);

  useEffect(() => {
    if (!props.mountOnEnter && !props.unmountOnExit && mounted) {
      if (props.in) {
        refFade.current.classList.add('show');
      } else {
        refFade.current.classList.remove('show');
      }
    }
    if (props.mountOnEnter && props.in && mounted === false) {
      setMounted(true);
      setTimeout(() => {
        refFade.current.classList.add('show');
      }, timeout / 2);
    }
    if (props.unmountOnExit && !props.in && mounted === true) {
      refFade.current.classList.remove('show');
      setTimeout(() => {
        setMounted(false);
      }, timeout);
    }
  }, [props.in, mounted]);

  if (mounted) {
    return (
      <div ref={refFade} className="b-fade">
        {props.children}
      </div>
    );
  } else {
    return null;
  }
};