import gsap from "gsap";

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

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

    isIntro: false,
    isOutro: false,
  }),

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

      const start = 0.5;
      const duration = 0.5;
      const delay = 0.35;

      gsap.fromTo(
        this.intro,
        { stage1Opacity: 0 },
        {
          stage1Opacity: 1,
          duration,
          delay: start,
          ease: "none",
          onComplete: () => {
            this.isIntro = false;
          },
        },
      );

      gsap.fromTo(
        this.intro,
        { statusBarY: -20 },
        {
          statusBarY: 0,
          duration: duration - delay,
          delay: start + delay,
          ease: "none",
        },
      );
    },

    animateOutro() {
      this.isOutro = true;

      const duration = 0.4;
      const delay = 0.08;

      gsap.fromTo(
        this.outro,
        {
          buttonOffsetY: 0,
          stage1Opacity: 1,
        },
        {
          buttonOffsetY: -200,
          stage1Opacity: 0,
          duration,
          delay,
          ease: "none",
          onComplete: () => {
            this.isOutro = true;
          },
        },
      );

      gsap.fromTo(
        this.outro,
        {
          stage2Opacity: 1,
        },
        {
          stage2Opacity: 0,
          ease: "none",
          duration: duration / 2 - delay,
        },
      );
    },
  },
});