import gsap from "gsap";

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

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

    isIntro: true,
    isOutro: false,
  }),

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

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

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

    animateOutro(to: AppScreen) {
      this.isOutro = true;
      this.outro.animateTop = to !== "settings";

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

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

      timeline
        .fromTo(
          this.outro,
          { stage2Opacity: 1 },
          {
            stage2Opacity: 0,
            duration: 0.16,
            ease: "none",
          },
          0,
        )
        .fromTo(
          this.outro,
          {
            buttonOffsetY: 0,
            stage1Opacity: 1,
          },
          {
            buttonOffsetY: -200,
            stage1Opacity: 0,
            duration: 0.4,
            ease: "none",
          },
          0.08,
        );
    },
  },
});
