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

import hostsTreeReducer from '../../common/HostsTree/store';
import usersReducer from '../../../store/usersSlice';
import containersReducer from './containersSlice';
import activityReducer from './activitySlice';
import hostsReducer from './hostsSlice';

export const store = configureStore({
  reducer: {
    hosts: hostsReducer,
    hostsTree: hostsTreeReducer,
    users: usersReducer,
    containers: containersReducer,
    activity: activityReducer
  }
});

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

// Typed hooks — components import these instead of `useSelector` /
// `useDispatch` so state is inferred as `RootState` and dispatch knows about
// the thunk middleware.
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch = () => useDispatch<AppDispatch>();

export default store;
