import { useEffect, useState } from 'react';
export default function useAnimation(idx, displayIdx, calls) {
  const shouldBeActive = idx === displayIdx || idx === displayIdx + 1;
  const [active, setActive] = useState(shouldBeActive);
  const [className, setClassName] = useState();
  useEffect(() => {
    if (!active && shouldBeActive) {
      setActive(true);
    }
    if (active && !shouldBeActive) {
      if (idx === calls.length - 1) {
        setClassName('animate-out');
      }
      setTimeout(() => {
        setActive(false);
      }, 500);
    }
  }, [displayIdx, idx, active]);
  useEffect(() => {
    if (active && idx === displayIdx) {
      setClassName('animate-in');
    }
  }, [displayIdx, active, idx]);
  return {
    active,
    className
  };
}