import gsap from "gsap";

const MODAL_MAX_Y_OFFSET = 106;
const BUTTONS_MAX_Y_OFFSET = 20;
const BUTTONS_TIME = 0.1;
const MODAL_TIME = 0.225;

export const useConfirmationModal = defineStore("confirmationModal", {
  state: () => ({
    isOpen: false,
    text: "",
    onConfirm: null as (() => void) | null,
    onClosed: null as (() => void) | null,
    onCancel: null as (() => void) | null,
    offsetY: MODAL_MAX_Y_OFFSET,
    buttonsYOffset: 0,
    modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
    isVisible: false,
    isClosing: false,
  }),

  actions: {
    open(options: {
      text: string;
      onCancel?: () => void;
      onConfirm?: () => void;
      onClosed?: () => void;
    }) {
      gsap.killTweensOf(this);
      this.text = options.text;
      this.onConfirm = options.onConfirm ?? null;
      this.onCancel = options.onCancel ?? null;
      this.onClosed = options.onClosed ?? null;
      this.isVisible = true;
      this.isClosing = false;
      this.isOpen = true;

      gsap
        .timeline()
        // standard buttons down
        .fromTo(
          this,
          { buttonsYOffset: 0 },
          {
            buttonsYOffset: BUTTONS_MAX_Y_OFFSET,
            duration: BUTTONS_TIME,
            ease: "none",
          },
        )
        // modal up
        .fromTo(
          this,
          { offsetY: MODAL_MAX_Y_OFFSET },
          { offsetY: 0, duration: MODAL_TIME, ease: "none" },
        )
        // modal buttons up
        .fromTo(
          this,
          { modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET },
          { modalButtonsYOffset: 0, duration: BUTTONS_TIME, ease: "none" },
        );
    },

    close() {
      if (!this.isVisible || this.isClosing) return;

      this.isClosing = true;

      gsap
        .timeline()
        // modal buttons down
        .to(this, {
          modalButtonsYOffset: BUTTONS_MAX_Y_OFFSET,
          duration: BUTTONS_TIME,
          ease: "none",
        })
        // modal down
        .to(this, {
          offsetY: MODAL_MAX_Y_OFFSET,
          duration: MODAL_TIME,
          ease: "none",
        })
        // standard buttons up
        .to(this, {
          buttonsYOffset: 0,
          duration: BUTTONS_TIME,
          ease: "none",
        })
        .call(() => {
          const closedCallback = this.onClosed;

          this.isVisible = false;
          this.isClosing = false;
          this.isOpen = false;
          this.text = "";
          this.onConfirm = null;
          this.onClosed = null;

          closedCallback?.();
        });
    },
  },
});
