import gsap from "gsap";

const DURATION = 0.11;

export const useMenuAnimation = (key: string, isOpen: Ref<boolean>) => {
  const animation = useState(`animation-${key}`, () => ({
    playing: false,
    stage1Offset: 48,
    stage2Offset: 48,
  }));

  watch(isOpen, (current, previous) => {
    animation.value.playing = true;

    const timeline = gsap.timeline({
      onComplete: () => {
        animation.value.playing = false;
      },
    });

    if (current === true && previous === false) {
      timeline
        .fromTo(
          animation.value,
          { stage1Offset: 48 },
          { stage1Offset: 0, ease: "none", duration: DURATION },
        )
        .fromTo(
          animation.value,
          { stage2Offset: 48 },
          { stage2Offset: 0, ease: "none", duration: DURATION },
        );
    } else if (current === false && previous === true) {
      timeline
        .fromTo(
          animation.value,
          { stage2Offset: 0 },
          { stage2Offset: 48, ease: "none", duration: DURATION },
        )
        .fromTo(
          animation.value,
          { stage1Offset: 0 },
          { stage1Offset: 48, ease: "none", duration: DURATION },
        );
    }
  });

  return animation.value;
};