import gsap from "gsap";

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

      titleY: LOGICAL_HEIGHT,

      barOffsetY: 24,
    },

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

    isIntro: true,
    isOutro: false,

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

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

      gsap
        .timeline()
        .fromTo(
          this.intro,
          {
            stage1Opacity: 0,
            titleY: LOGICAL_HEIGHT,
          },
          {
            stage1Opacity: 1,
            titleY: LOGICAL_HEIGHT - 23,
            duration: 0.1,
            ease: "none",
          },
          1,
        )
        .fromTo(
          this.intro,
          { stage2Opacity: 0 },
          {
            stage2Opacity: 1,
            duration: 0.1,
            ease: "none",
          },
          1.15,
        )
        .fromTo(
          this.intro,
          {
            stage3Opacity: 0,
            barOffsetY: 24,
          },
          {
            stage3Opacity: 1,
            barOffsetY: 0,
            duration: 0.1,
            ease: "none",
          },
          1.3,
        )
        .call(() => {
          this.isIntro = false;
        });
    },

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

      const { assets } = useAssets();
      assets.audio.messageSent.play();

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

      if (this.notifications.length === 36) {
        const achievements = useAchievementsStore();
        achievements.unlock("contact_36_notifications");
      }
    },

    animateOutro() {
      this.isOutro = true;

      const { assets } = useAssets();
      assets.audio.menuConfirmed.play();

      const timeline = gsap.timeline({
        onComplete: () => {
          setTimeout(() => {
            this.isOutro = false;
            const app = useAppStore();
            app.navigateTo("home");
          }, 1000);
        },
      });

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