import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import { useDispatch as useDispatchRaw, useSelector as useSelectorRaw } from 'react-redux'
import { sceneReducer, sceneName } from './scene'
import { userReducers, userName } from './user'
import { exampleReducer, exampleName } from './example'
import { exampleFileName, exampleFileReducer } from './files'

import type { TypedUseSelectorHook } from 'react-redux'

export const store = configureStore({
  reducer: {
    [sceneName]: sceneReducer,
    [userName]: userReducers,
    [exampleName]: exampleReducer,
    [exampleFileName]: exampleFileReducer
  }
})

export type StoreState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export type AppSelector = TypedUseSelectorHook<StoreState>

export const useDispatch = useDispatchRaw<AppDispatch>
export const useSelector: AppSelector = useSelectorRaw

export const AppStore = ({ children }: { children: any }) => (
  <Provider store={store}>
    { children }
  </Provider>
)

export default store
export * from './scene'
export * from './user'
export * from './example'
export * from './files'