import { create } from "zustand";
import { immer } from "zustand/middleware/immer";
import { LAYER_IDS } from "../Map/Layers/constants";

const INITIAL_STATE = {
  [LAYER_IDS.initial]: true,
  [LAYER_IDS.approve]: false,
  [LAYER_IDS.working]: false,
};

const store = (set) => ({
  isVisible: INITIAL_STATE,

  toggleVisibility: (layerId) =>
    set((state) => {
      state.isVisible[layerId] = !state.isVisible[layerId];
    }),

  setLayersVisibility: (config) =>
    set((state) => {
      config.visible.forEach((layerId) => {
        state.isVisible[layerId] = true;
      });
      config.invisible.forEach((layerId) => {
        state.isVisible[layerId] = false;
      });
    }),
});

export const useLayersVisibility = create(immer(store));