import { create, useStore } from "zustand";
import { produce } from "immer";
import { useShallow } from "zustand/react/shallow";
import { pick } from "ramda";

type InteractionState = {
  isHorizontalInteractionAllowed: boolean;
  allowHorizontalInteraction: Callback;
  disallowHorizontalInteraction: Callback;
};

type StateKey = keyof InteractionState;

const interactionStore = create<InteractionState>((set) => ({
  isHorizontalInteractionAllowed: true,
  allowHorizontalInteraction: () =>
    set(
      produce((draft) => {
        draft.isHorizontalInteractionAllowed = true;
      })
    ),
  disallowHorizontalInteraction: () =>
    set(
      produce((draft) => {
        draft.isHorizontalInteractionAllowed = false;
      })
    ),
}));

export const useInteractionState = (
  stateKeys: [StateKey, StateKey?, StateKey?]
) => {
  const selector = useShallow(pick(stateKeys));

  return useStore(interactionStore, selector) as InteractionState;
};