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,
    },

    outro: {
      stage1Opacity: 1,
      stage2Opacity: 1,
      stage3Opacity: 1,
    },

    isIntro: true,
    isOutro: true,

    notifications: [] as string[],
    notificationsYOffset: 0,
  }),

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

      const start = 2;

      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;
          },
        },
      );
    },

    pushNotification(content: string) {
      this.notifications.push(content);

      gsap.fromTo(
        this,
        { notificationsYOffset: 20 },
        { notificationsYOffset: 0, duration: 0.075 },
      );
    },

    animateOutro() {
      this.isOutro = true;

      gsap.fromTo(
        this.outro,
        {
          stage1Opacity: 1,
        },
        {
          stage1Opacity: 0,
          duration: 0.2,
          ease: "none",
        },
      );

      gsap.fromTo(
        this.outro,
        {
          stage2Opacity: 1,
        },
        {
          stage2Opacity: 0,
          duration: 0.25,
          delay: 0.25,
          ease: "none",
        },
      );

      gsap.fromTo(
        this.outro,
        {
          stage3Opacity: 1,
        },
        {
          stage3Opacity: 0,
          duration: 0.3,
          delay: 0.5,
          ease: "none",
          onComplete: () => {
            setTimeout(() => {
              this.isOutro = false;
              navigateTo("/");
            }, 2000);
          },
        },
      );
    },
  },
});