import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import { useDispatch as useDispatchRaw, useSelector as useSelectorRaw } from 'react-redux'
import { sceneReducer } from './scene'

import type { TypedUseSelectorHook } from 'react-redux'

export const store = configureStore({
  reducer: {
    scene: sceneReducer
  }
})

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