import { createSlice } from '@reduxjs/toolkit';
import Settings from 'settings';

const initialState = {
  commerceUrl: Settings.commerceUrl,
  isMobileApp:
    typeof window !== 'undefined' &&
    localStorage.getItem('isMobileApp') === 'true',
  miniBasket: {
    open: false,
    highlightedItem: null
  },
  rootModal: {
    open: false,
    title: null,
    content: null
  },
  userPhoneNumber: null
};

const rootSlice = createSlice({
  name: 'root',
  initialState,
  reducers: {
    openMiniBasket: (state) => {
      state.miniBasket.open = true;
    },
    closeMiniBasket: (state) => {
      state.miniBasket.open = false;
    },
    toggleMiniBasket: (state) => {
      state.miniBasket.open = !state.miniBasket.open;
    },
    setHighlightedItem: (state, action: { payload: number | null }) => {
      state.miniBasket.highlightedItem = action.payload;
    },
    openRootModal: (
      state,
      action: { payload: { title?: string; content?: string } }
    ) => {
      state.rootModal.open = true;
      state.rootModal.title = action.payload.title;
      state.rootModal.content = action.payload.content;
    },
    closeRootModal: (state) => {
      state.rootModal.open = false;
      state.rootModal.title = null;
      state.rootModal.content = null;
    },
    setUserPhoneNumber(state, { payload }) {
      state.userPhoneNumber = payload;
    }
  }
});

export const {
  openMiniBasket,
  closeMiniBasket,
  toggleMiniBasket,
  setHighlightedItem,
  openRootModal,
  closeRootModal,
  setUserPhoneNumber
} = rootSlice.actions;

export default rootSlice.reducer;