src/store/useModal.ts

import ReactGA from "react-ga4";
import { create } from "zustand";
import { Modal } from "src/containers/Modals";
import useUser from "./useUser";

type ModalState = {
  [key in Modal]: boolean;
};

interface ModalActions {
  setVisible: (modal: Modal) => (visible: boolean) => void;
}

const initialStates: ModalState = {
  clear: false,
  cloud: false,
  download: false,
  import: false,
  account: false,
  node: false,
  share: false,
  login: false,
  premium: false,
  jwt: false,
  schema: false,
  cancelPremium: false,
  review: false,
  jq: false,
  type: false,
};

const authModals: Modal[] = ["cloud", "account"];
const premiumModals: Modal[] = [];

const useModal = create<ModalState & ModalActions>()(set => ({
  ...initialStates,
  setVisible: modal => visible => {
    const user = useUser.getState();

    if (authModals.includes(modal) && !user.isAuthenticated) {
      return set({ login: true });
    } else if (premiumModals.includes(modal) && !user.premium) {
      return set({ premium: true });
    }

    if (visible) ReactGA.event({ category: "Modal View", action: `modal_view_${modal}` });
    set({ [modal]: visible });
  },
}));

export default useModal;