import gsap from "gsap";

export type HomeButton =
  | "projects"
  | "contact"
  | "gallery"
  | "settings"
  | "achievements"
  | "credits";

export const useHomeStore = defineStore("home", {
  state: () => ({
    intro: {
      statusBarY: -20,
      stage1Opacity: 0,
      topScreenOpacity: 0,
    },

    outro: {
      buttonOffsetY: 0,
      stage1Opacity: 1,
      stage2Opacity: 1,
      animateTop: false,
    },

    selectedButton: "projects" as HomeButton,

    isIntro: true,
    isOutro: false,
  }),

  actions: {
    reset() {
      const app = useAppStore();
      if (
        app.previousScreen === "achievements" ||
        app.previousScreen === "credits"
      ) {
        return;
      }

      const selectedButton = this.selectedButton;
      this.$reset();
      this.selectedButton = selectedButton;
      this.animateIntro();

      if (app.visitedGallery) {
        app.visitedGallery = false;
        const achievements = useAchievementsStore();
        achievements.unlock("gallery_visit");
      }
    },

    animateIntro() {
      this.isIntro = true;

      const app = useAppStore();

      const timeline = gsap.timeline({
        onComplete: () => {
          this.isIntro = false;
        },
      });

      timeline.fromTo(
        this.intro,
        { stage1Opacity: 0 },
        {
          stage1Opacity: 1,
          duration: 0.35,
          ease: "none",
        },
        0,
      );

      if (app.previousScreen !== "settings") {
        timeline
          .fromTo(
            this.intro,
            { topScreenOpacity: 0 },
            {
              topScreenOpacity: 1,
              duration: 0.35,
              ease: "none",
            },
            0,
          )
          .fromTo(
            this.intro,
            { statusBarY: -20 },
            {
              statusBarY: 0,
              duration: 0.1,
              ease: "none",
            },
            0.15,
          );
      } else {
        this.intro.topScreenOpacity = 1;
        this.intro.statusBarY = 0;
      }
    },

    animateOutro(to: AppScreen) {
      const { assets } = useAssets();
      assets.audio.menuOpen.play();

      if (to === "achievements") {
        const achievementsScreen = useAchievementsScreen();
        achievementsScreen.animateFadeToBlackIntro();
        return;
      }

      if (to === "credits") {
        const creditsScreen = useCreditsStore();
        creditsScreen.animateFadeToBlackIntro();
        return;
      }

      this.isOutro = true;
      this.outro.animateTop = to !== "settings";

      const timeline = gsap.timeline({
        onComplete: () => {
          this.isOutro = false;

          const app = useAppStore();
          if (to === "gallery") {
            app.navigateTo("gallery");
          } else {
            app.navigateTo(to);
          }
        },
      });

      timeline
        .fromTo(
          this.outro,
          { stage2Opacity: 1 },
          {
            stage2Opacity: 0,
            duration: 0.12,
            ease: "none",
          },
          0,
        )
        .fromTo(
          this.outro,
          {
            buttonOffsetY: 0,
            stage1Opacity: 1,
          },
          {
            buttonOffsetY: -200,
            stage1Opacity: 0,
            duration: 0.3,
            ease: "none",
          },
          0.06,
        );
    },
  },
});