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

interface Props extends React.HTMLAttributes<HTMLDivElement> {
  show: boolean;
  children: React.ReactNode;
  onAnimationEnd?: () => void;
}

export const Animation: React.FC<Props> = ({
  show = true,
  children,
  onAnimationEnd = undefined,
  ...divAttributes
}): React.ReactElement<HTMLDivElement> => {
  const [shouldRender, setRender] = useState(show);

  useEffect((): void => {
    if (show) setRender(true);
  }, [show]);

  const handleAnimationEnd = React.useCallback((): void => {
    if (!show) setRender(false);
    if (onAnimationEnd) {
      onAnimationEnd();
    }
  }, [onAnimationEnd, show]);

  return shouldRender ? (
    <div {...divAttributes} onAnimationEnd={handleAnimationEnd}>
      {children}
    </div>
  ) : null;
};