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() {
      const appStore = useAppStore();

      this.isIntro = true;

      const timeline = gsap.timeline({
        onComplete: () => {
          this.isIntro = false;
          if (!appStore.booted) appStore.booted = true;
        },
      });

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

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

      const timeline = gsap.timeline({
        onComplete: () => {
          this.isOutro = true;
          const router = useRouter();
          router.push({ query: { screen: 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,
        );
    },
  },
});