const initialState = {
  counter: 0,
  light: false,
  response: {}
}

interface StateType {
  counter: number
  light: boolean
  response: {
    code?: number
    message?: string
  }
}

interface ActionsParamType {
  increment: number
  openLight: undefined
  get: undefined
} // You only need to tag the type of params here !

const model: ModelType<StateType, ActionsParamType> = {
  actions: {
    increment: async (payload, { state }) => {
      return {
        counter: state.counter + (payload || 1)
      }
    },
    openLight: async (_, { state, actions }) => {
      await actions.increment(1) // You can use other actions within the model
      await actions.get() // support async functions (block actions)
      actions.get()
      await actions.increment(1) // + 1
      await actions.increment(1) // + 2
      await actions.increment(1) // + 3 as expected !
      return { light: !state.light }
    },
    get: async () => {
      await new Promise((resolve, reject) =>
        setTimeout(() => {
          resolve()
        }, 3000)
      )
      return {
        response: {
          code: 200,
          message: `${new Date().toLocaleString()} open light success`
        }
      }
    }
  },
  state: initialState
}

export default model

// You can use these types when use Class Components.
// type ConsumerActionsType = getConsumerActionsType<typeof Model.actions>
// type ConsumerType = { actions: ConsumerActionsType; state: StateType }
// type ActionType = ConsumerActionsType
// export { ConsumerType, StateType, ActionType }

import { Model } from 'react-model'
import Home from '../model/home'
import Shared from '../model/shared'

const models = { Home, Shared }

export const { getInitialState, useStore, getState, actions, subscribe, unsubscribe } = Model(models)

import { subscribe, unsubscribe } from './index'

const callback = () => {
  const user = getState('User')
  localStorage.setItem('user_id', user.id)
}

// subscribe action
subscribe('User', 'login', callback)
// subscribe actions
subscribe('User', ['login', 'logout'], callback)
// unsubscribe the observer of some actions
unsubscribe('User', 'login') // only logout will run callback now

// StateType and ActionsParamType definition
// ...

const model: ModelType<StateType, ActionsParamType> = {
  actions: {
    increment: async (params, { state: s }) => {
      // return (state: typeof s) => { // TypeScript < 3.9
      return state => {
        state.counter += params || 1
      }
    },
    decrease: params => s => {
      s.counter += params || 1
    }
  }
}

export default model

const ExtCounter: ModelType<
  { name: string }, // State Type
  { ext: undefined }, // ActionParamsType
  { name: string } // ExtContextType
> = {
  actions: {
    // { state, action } => { state, action, [name] }
    ext: (_, { name }) => {
      return { name }
    }
  },
  state: { name: '' }
}

const { useStore } = Model(ExtCounter, { name: 'test' })
// state.name = ''
const [state, actions] = useStore()
// ...
actions.ext()
// state.name => 'test'

// 3.1.x
export default Model(model)
// 4.x.x
export default model

import Sub from './sub-model'
export default Model({ Sub })

interface State {
  counter: number
  enable: boolean
}

interface ActionParams {
  add: number
  switch: undefined
}

const model: ModelType<State, ActionParams> = {
  state: {
    counter: 1
    enable: false
  },
  actions: {
    add: (payload) => state => {
      state.counter += payload
    },
    switch: () => state => {
      state.enable = !state.enable
    }
  }
}

const Component = () => {
  // 3.1.x, Component rerender when add action is invoked
  const [counter] = useStore('Shared', ['add'])
  // 4.x.x, Component rerender when counter value diff
  const [counter] = useStore('Shared', state => state.counter)
}

import { middlewares } from 'react-model'
// Find the index of middleware

// Disable all actions' log
middlewares.config.logger.enable = false
// Disable logs from specific type of actions
middlewares.config.logger.enable = ({ actionName }) => ['increment'].indexOf(actionName) !== -1

import { actionMiddlewares, middlewares, Model } from 'react-model'
import { sendLog } from 'utils/log'
import Home from '../model/home'
import Shared from '../model/shared'

// custom middleware
const ErrorHandler: Middleware = async (context, restMiddlewares) => {
  const { next } = context
  await next(restMiddlewares).catch((e: Error) => sendLog(e))
}

// Find the index of middleware
const getNewStateMiddlewareIndex = actionMiddlewares.indexOf(
  middlewares.getNewState
)

// Replace it
actionMiddlewares.splice(getNewStateMiddlewareIndex, 0, ErrorHandler)

const stores = { Home, Shared }

export default Model(stores)

import { actionMiddlewares, Model } from 'react-model'
import Example from 'models/example'

// Example, not recommend to use on production directly without consideration
// Write current State to localStorage after action finish
const persistMiddleware: Middleware = async (context, restMiddlewares) => {
  localStorage.setItem('__REACT_MODEL__', JSON.stringify(context.Global.State))
  await context.next(restMiddlewares)
}

// Use on all models
actionMiddlewares.push(persistMiddleware)
Model({ Example }, JSON.parse(localStorage.getItem('__REACT_MODEL__')))

// Use on single model
const model = {
  state: JSON.parse(localStorage.getItem('__REACT_MODEL__'))['you model name']
  actions: { ... },
  middlewares: [...actionMiddlewares, persistMiddleware]
}

import { actionMiddlewares, Model } from 'react-model'
const delayMiddleware: Middleware = async (context, restMiddlewares) => {
  await timeout(1000, {})
  context.next(restMiddlewares)
}

const nextCounterModel: ModelType<CounterState, NextCounterActionParams> = {
  actions: {
    add: num => {
      return state => {
        state.count += num
      }
    },
    increment: async (num, { actions }) => {
      actions.add(num)
      await timeout(300, {})
    }
  },
  // You can define the custom middlewares here
  middlewares: [delayMiddleware, ...actionMiddlewares],
  state: {
    count: 0
  }
}

export default Model(nextCounterModel)