import gsap from "gsap";

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

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

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

  return animation.value;
};
