import { filter, startsWith } from 'lodash-es'
import { ActionContext, ActionTree, GetterTree, Module, MutationTree } from 'vuex'
import Vue from 'vue'
import { RootState } from '..'

interface IReuseTabState {
  source: any[]
  to?: string
}

const mutations: MutationTree<IReuseTabState> = {
  changeSource(state: IReuseTabState, param: any) {
    state.source = [...param.source]
  },
  changeTo(state: IReuseTabState, param: any) {
    state.to = param
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$parentReuseTabStore.changeTo(param)
    }
  },
}

const actions: ActionTree<IReuseTabState, RootState> = {
  add(context: ActionContext<IReuseTabState, RootState>, param: any) {
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$parentReuseTabStore.add(param)
    }
    const oldTables = context.state.source
    const targetName = param.name
    const activeName = param.activeName

    const isPassport = startsWith(targetName, '/passport')
    if (isPassport === true) {
      return
    }

    if (activeName === targetName) {
      return
    }

    const index = oldTables.findIndex((v: any) => v.name === param.name)
    // 重载一次路由，防止路由参数丢失
    if (index >= 0) {
      oldTables[index] = param
    } else {
      oldTables.push(param)
    }

    if (oldTables.length > 6) {
      oldTables.shift()
    }

    context.commit('changeSource', { source: oldTables })
  },
  remove(context: ActionContext<IReuseTabState, RootState>, param: any) {
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$parentReuseTabStore.remove(param)
    }
    const source = context.state.source

    const { activeName, name, next } = param
    const targetName = name

    // 关闭当前页
    if (activeName === targetName) {
      // 下一步路由
      if (typeof next !== 'undefined') {
        context.commit('changeTo', next)
      } else {
        let index: number = source.findIndex((tab: any) => tab.name === targetName)

        index = index > 0 ? index - 1 : index + 1

        context.commit('changeTo', source[index])
      }
    }

    const newTabs = filter(source, (tab: any) => tab.name !== targetName)
    context.commit('changeSource', { source: newTabs })
  },
  changeTitle(context: ActionContext<IReuseTabState, RootState>, param: any) {
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$parentReuseTabStore.changeTitle(param)
    }
    const { title, route } = param
    const list = context.state.source
    list.forEach((item) => {
      if (item.name === route.name) {
        item.title = title
      }
    })
    context.commit('changeSource', { source: list })
  },
}
const getters: GetterTree<IReuseTabState, RootState> = {
  source: (state) => {
    return state.source
  },
}
const reuseTabState: IReuseTabState = {
  source: [],
  to: '',
}

const reuseTab: Module<IReuseTabState, RootState> = {
  namespaced: true,
  state: reuseTabState,
  actions,
  mutations,
  getters,
}

export default reuseTab