import { GetterTree, Module, MutationTree } from 'vuex'
import Vue from 'vue'
import { RootState } from '@/store'
import config from '@/config'

type LayoutTheme = 'light' | 'dark'

export interface ISettingState {
  layoutMode: string // 布局, 内置的布局查看 src/layout/main/buildin-layout
  layoutTheme: LayoutTheme
  layoutColor: string
  fixedMenu: boolean
  fixedHeader: boolean
  bread: boolean
  multipleTabs: boolean
}

const mutations: MutationTree<ISettingState> = {
  // 布局设置
  setLayoutMode(state: ISettingState, layoutMode: string) {
    localStorage.setItem(`${config.pkgName}_layoutMode`, layoutMode)
    state.layoutMode = layoutMode
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setLayoutMode(layoutMode)
    }
  },
  // 主题背景
  setTheme(state: ISettingState, layoutTheme: LayoutTheme) {
    localStorage.setItem(`${config.pkgName}_layoutTheme`, layoutTheme)
    state.layoutTheme = layoutTheme
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setTheme(layoutTheme)
    }
  },
  // 主题颜色
  setColor(state: ISettingState, layoutColor: string) {
    localStorage.setItem(`${config.pkgName}_layoutColor`, layoutColor)
    state.layoutColor = layoutColor
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setColor(layoutColor)
    }
  },
  // 固定菜单栏
  setFixedMenu(state: ISettingState, fixedMenu: boolean) {
    localStorage.setItem(`${config.pkgName}_fixedMenu`, JSON.stringify(fixedMenu))
    state.fixedMenu = fixedMenu
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setFixedMenu(fixedMenu)
    }
  },
  // 固定头部
  setFixedHeader(state: ISettingState, fixedHeader: boolean) {
    localStorage.setItem(`${config.pkgName}_fixedHeader`, JSON.stringify(fixedHeader))
    state.fixedHeader = fixedHeader
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setFixedHeader(fixedHeader)
    }
  },
  // 面包屑模式
  setBread(state: ISettingState, bread: boolean) {
    localStorage.setItem(`${config.pkgName}_bread`, JSON.stringify(bread))
    state.bread = bread
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setBread(bread)
    }
  },
  // 多页签模式
  setMultipleTabs(state: ISettingState, multipleTabs: boolean) {
    localStorage.setItem(`${config.pkgName}_multipleTabs`, JSON.stringify(multipleTabs))
    state.multipleTabs = multipleTabs
    if (window.__POWERED_BY_QIANKUN__) {
      Vue.prototype.$settingStore.setMultipleTabs(multipleTabs)
    }
  },
}

const getters: GetterTree<ISettingState, RootState> = {
  layoutMode: (state: ISettingState) => state.layoutMode,
  layoutTheme: (state: ISettingState) => state.layoutTheme,
  layoutColor: (state: ISettingState) => state.layoutColor,
  fixedMenu: (state: ISettingState) => state.fixedMenu,
  fixedHeader: (state: ISettingState) => state.fixedHeader,
  bread: (state: ISettingState) => state.bread,
  multipleTabs: (state: ISettingState) => state.multipleTabs,
}

const getItem = (name: string) => {
  return localStorage.getItem(`${config.pkgName}${name}`)
}
const settings: ISettingState = {
  layoutMode: getItem('_layoutMode') || 'BuildinLayoutLeft',
  layoutTheme: (getItem('_layoutTheme') as LayoutTheme) || 'dark',
  layoutColor: getItem('_layoutColor') || '#1890FF',
  fixedMenu: getItem('_fixedMenu') === 'true' || getItem('_fixedMenu') === null,
  fixedHeader: getItem('_fixedHeader') === 'true' || getItem('_fixedHeader') === null,
  bread: getItem('_bread') === 'true' || getItem('_bread') === null,
  multipleTabs: getItem('_multipleTabs') === 'true' || getItem('_multipleTabs') === null,
}

const setting: Module<ISettingState, RootState> = {
  namespaced: true,
  state: settings,
  mutations,
  getters,
}

export default setting