import gsap from "gsap";

export const useContactStore = defineStore("contact", {
  state: () => ({
    intro: {
      stage1Opacity: 0,
      stage2Opacity: 0,
      stage3Opacity: 0,

      titleY: SCREEN_HEIGHT,

      topBarY: -20,
      bottomBarY: SCREEN_HEIGHT + 20,
    },

    isIntro: true,
  }),

  actions: {
    animateIntro() {
      this.isIntro = true;

      const start = 3;

      gsap.fromTo(
        this.intro,
        {
          stage1Opacity: 0,
          titleY: SCREEN_HEIGHT,
        },
        {
          stage1Opacity: 1,
          titleY: SCREEN_HEIGHT - 23,
          duration: 0.1,
          delay: start,
          ease: "none",
        },
      );

      gsap.fromTo(
        this.intro,
        {
          stage2Opacity: 0,
        },
        {
          stage2Opacity: 1,
          duration: 0.1,
          delay: start + 0.15,
          ease: "none",
        },
      );

      gsap.fromTo(
        this.intro,
        {
          stage3Opacity: 0,
          topBarY: -20,
          bottomBarY: SCREEN_HEIGHT - 4,
        },
        {
          stage3Opacity: 1,
          topBarY: 0,
          bottomBarY: SCREEN_HEIGHT - 24,
          duration: 0.1,
          delay: start + 0.15 + 0.15,
          ease: "none",
          onComplete: () => {
            this.isIntro = false;
          },
        },
      );
    },
  },
});