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 timeline = gsap.timeline({
        onComplete: () => {
          this.isIntro = false;
        },
      });

      timeline
        .fromTo(
          this.intro,
          {
            stage1Opacity: 0,
            titleY: SCREEN_HEIGHT,
          },
          {
            stage1Opacity: 1,
            titleY: SCREEN_HEIGHT - 23,
            duration: 0.1,
            ease: "none",
          },
          2,
        )
        .fromTo(
          this.intro,
          { stage2Opacity: 0 },
          {
            stage2Opacity: 1,
            duration: 0.1,
            ease: "none",
          },
          2.15,
        )
        .fromTo(
          this.intro,
          {
            stage3Opacity: 0,
            topBarY: -20,
            bottomBarY: SCREEN_HEIGHT - 4,
          },
          {
            stage3Opacity: 1,
            topBarY: 0,
            bottomBarY: SCREEN_HEIGHT - 24,
            duration: 0.1,
            ease: "none",
          },
          2.3,
        );
    },

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

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

    animateOutro() {
      this.isOutro = true;

      const timeline = gsap.timeline({
        onComplete: () => {
          setTimeout(() => {
            this.isOutro = false;
            navigateTo("/");
          }, 2000);
        },
      });

      timeline
        .fromTo(
          this.outro,
          { stage1Opacity: 1 },
          {
            stage1Opacity: 0,
            duration: 0.2,
            ease: "none",
          },
          0,
        )
        .fromTo(
          this.outro,
          { stage2Opacity: 1 },
          {
            stage2Opacity: 0,
            duration: 0.25,
            ease: "none",
          },
          0.25,
        )
        .fromTo(
          this.outro,
          { stage3Opacity: 1 },
          {
            stage3Opacity: 0,
            duration: 0.3,
            ease: "none",
          },
          0.5,
        );
    },
  },
});