import React, { useContext } from 'react'
import { useObserver } from 'mobx-react'
import main from './main'
import searchTypeSelect from './searchTypeSelect'
import searchModeRadio from './searchModeRadio'
import searchPagination from './searchPagination'
import hasPhoneSwitch from './hasPhoneSwitch'
import savedSearchParams from './savedSearchParams'
import saveAndRemoveBtn from './saveAndRemoveBtn'

type Main = typeof main
type SearchTypeSelect = typeof searchTypeSelect
type SearchModeRadio = typeof searchModeRadio
type SearchPagination = typeof searchPagination
type HasPhoneSwitch = typeof hasPhoneSwitch
type SavedSearchParams = typeof savedSearchParams
type SaveAndRemoveBtn = typeof saveAndRemoveBtn

type Store = {
  main: Main
  searchTypeSelect: SearchTypeSelect
  searchModeRadio: SearchModeRadio
  searchPagination: SearchPagination
  hasPhoneSwitch: HasPhoneSwitch
  savedSearchParams: SavedSearchParams
  saveAndRemoveBtn: SaveAndRemoveBtn
}

export const store: Store = {
  main,
  searchTypeSelect,
  searchModeRadio,
  searchPagination,
  hasPhoneSwitch,
  savedSearchParams,
  saveAndRemoveBtn,
}

const StoreContext = React.createContext(store)

export function useStore(): [Store, typeof useObserver] {
  return [useContext(StoreContext), useObserver]
}

export default StoreContext