import { refreshToken } from '@/proxy/account/auth.service'
import { createStore, createTypedHooks, persist } from 'easy-peasy'
import {
  Config as ReduxStateSyncConfig,
  createStateSyncMiddleware,
  initMessageListener,
} from 'redux-state-sync'
import * as abpConfigService from '../proxy/config/abpConfig.service'
import * as listFormService from '../proxy/admin/list-form/list-form.service'
import { AbpConfigModel, abpConfigModel } from './abpConfig.model'
import { AdminModel, adminModel } from './admin.model'
import { AuthModel, authModel } from './auth.model'
import { BaseModel, baseModel } from './base.model'
import { LocaleModel, localeModel } from './locale.model'
import { ThemeModel, themeModel } from './theme.model'
import { MenuService } from '@/services/menu.service'

export interface StoreModel {
  abpConfig: AbpConfigModel
  theme: ThemeModel
  auth: AuthModel
  base: BaseModel
  locale: LocaleModel
  admin: AdminModel
}

const menuService = new MenuService()

const injections = {
  abpConfigService,
  menuService,
  listFormService,
  refreshToken,
}
export type Injections = typeof injections

const reduxStateSyncConfig: ReduxStateSyncConfig = {
  predicate: (action) => {
    // console.log({ action })
    const blacklist = [
      'persist/FLUSH',
      'persist/REHYDRATE',
      'persist/PAUSE',
      'persist/PERSIST',
      'persist/PURGE',
      'persist/REGISTER',
    ]
    const whitelist = ['@action.auth.signOut', '@action.auth.signIn', '@action.locale.setLang']
    if (typeof action !== 'function') {
      return whitelist.indexOf(action.type) >= 0
      // return blacklist.indexOf(action.type) < 0
    }
    return false
  },
}

export const store = createStore<StoreModel>(
  persist(
    {
      abpConfig: abpConfigModel,
      theme: themeModel,
      auth: authModel,
      base: baseModel,
      locale: localeModel,
      admin: adminModel,
    },
    {
      allow: ['auth', 'theme', 'locale'],
      storage: 'localStorage',
    },
  ),
  {
    middleware: [createStateSyncMiddleware(reduxStateSyncConfig)],
    devTools: import.meta.env.DEV,
    injections,
  },
)

initMessageListener(store)

const typedHooks = createTypedHooks<StoreModel>()

export const useStoreActions = typedHooks.useStoreActions
export const useStoreDispatch = typedHooks.useStoreDispatch
export const useStoreState = typedHooks.useStoreState