import { configureStore } from '@reduxjs/toolkit';
import { useDispatch, useSelector, type TypedUseSelectorHook } from 'react-redux';

import inventoryReducer from '../../../store/inventorySlice';
import groupDetailReducer from './groupDetailSlice';
import { groupModulesApi } from './groupModulesApi';
import groupsListReducer from './groupsListSlice';

export const store = configureStore({
  reducer: {
    groupsList: groupsListReducer,
    groupDetail: groupDetailReducer,
    [groupModulesApi.reducerPath]: groupModulesApi.reducer,
    // Shared inventory-attributes slice, consumed by the common InventoryFilter.
    inventory: inventoryReducer
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(groupModulesApi.middleware)
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

export default store;
