import gsap from "gsap";

export const useMenuAnimation = (isOpen: Ref<boolean>) => {
  const animation = reactive({
    playing: false,
    stage1Offset: 48,
    stage2Offset: 48,
  });

  watch(isOpen, (current, previous) => {
    const duration = 0.1;
    const timeline = gsap.timeline({
      onStart: () => {
        animation.playing = true;
      },
      onComplete: () => {
        animation.playing = false;
      },
    });

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

  return animation;
};