import { createSlice } from "@reduxjs/toolkit";

export const modalConfig = {
  status: false,
  component: null,
  acceptDisabled: true,
  data: {},
  results: null,
  promiseFunc: null,
  promisedData: [],
  buttonShow: false,
  cannotClose: false,
  bodyStyle: {},
  modalStyle: {},
  onKeyDown: false,
  notification: {
    status: false,
    message: "",
    duration: 2000,
  },
  accept: {
    text: null,
    action: (bodyElement, data, promisedData, result) => {},
  },
  close: {
    text: null,
    action: (result) => {},
  },
};

export const modalSlice = createSlice({
  name: "modal",
  initialState: {
    modalData: [],
  },
  reducers: {
    addModal: (state, action) => {
      state.modalData = [...state.modalData, action.payload];
    },

    editDataModalOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;

      state.modalData[action.payload.index] = {
        ...currentData,
        data: { ...currentData?.data, ...action.payload.data },
      };
    },

    setResultOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;

      state.modalData[action.payload.index] = {
        ...currentData,
        results: action.payload.data,
      };
    },

    setNotificationOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;
      state.modalData[action.payload.index] = {
        ...currentData,
        notification: {
          ...action.payload.data,
        },
      };
    },

    resetNotificationOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;
      state.modalData[action.payload.index] = {
        ...currentData,
        notification: {
          ...modalConfig.notification,
        },
      };
    },

    editModalOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;

      state.modalData[action.payload.index] = {
        ...currentData,
        ...action.payload.data,
      };
    },

    setPromisedDataOnIndex: (state, action) => {
      const currentData = state.modalData?.[action.payload.index];
      if (!currentData) return;

      state.modalData[action.payload.index] = {
        ...currentData,
        promisedData: action.payload.data,
      };
    },

    hideModalOnIndex: (state, action) => {
      state.modalData = state.modalData.map((item, index) =>
        index === action.payload ? { ...item, status: false } : item
      );

      const isHideAllModal = state.modalData.every((item) => !item.status);
      if (isHideAllModal) state.modalData = [];
    },

    resetModal: (state) => {
      state.modalData = [];
    },
  },
  selectors: {
    selectModal: (state) => state.modalData,
  },
});

export const {
  addModal,
  editModalOnIndex,
  setResultOnIndex,
  editDataModalOnIndex,
  setPromisedDataOnIndex,
  resetModal,
  hideModalOnIndex,
  setNotificationOnIndex,
  resetNotificationOnIndex,
} = modalSlice.actions;
export const { selectModal } = modalSlice.selectors;

export default modalSlice.reducer;
