import { PayloadAction, createSelector, createSlice } from '@reduxjs/toolkit';
import { RootState } from './rootReducer';

const initialState = {
  menuBarHeight: 0,
  filterHeight: 0,
  paginationHeight: 0
};
const slice = createSlice({
  name: 'monitor/style',
  initialState,
  reducers: {
    setMenubarHeight(state, { payload }: PayloadAction<number>) {
      state.menuBarHeight = payload;
    },
    setFilterHeight(state, { payload }: PayloadAction<number>) {
      state.filterHeight = payload;
    },
    setPaginationHeight(state, { payload }: PayloadAction<number>) {
      state.paginationHeight = payload;
    }
  }
});

const barSel = (s: RootState) => s.style.menuBarHeight;
const filterSel = (s: RootState) => s.style.filterHeight;
const pagSel = (s: RootState) => s.style.paginationHeight;
export const tableNegativeHeightSelector = createSelector(
  barSel,
  filterSel,
  pagSel,
  (b, f, p) => b + f + p
);

export const {
  setMenubarHeight,
  setFilterHeight,
  setPaginationHeight
} = slice.actions;
export default slice.reducer;