import variables from '@/styles/element-variables.scss'
import defaultSettings from '@/settings'
import ncc from '@/utils/ncc'

const {
  showSettings,
  tagsView,
  tagsIcon,
  showLanguage,
  showSearch,
  useCache,
  fixedHeader,
  sidebarLogo,
  themeClass,
  slideClass,
  layoutType
} = defaultSettings

const state = {
  theme: variables.theme,
  showSettings: showSettings,
  tagsView: ncc.storageGet('tagsView') === null ? tagsView : ncc.storageGet('tagsView'),
  tagsIcon: ncc.storageGet('tagsIcon') === null ? tagsIcon : ncc.storageGet('tagsIcon'),
  showLanguage: ncc.storageGet('showLanguage') === null ? showLanguage : ncc.storageGet('showLanguage'),
  showSearch: ncc.storageGet('showSearch') === null ? showSearch : ncc.storageGet('showSearch'),
  useCache: ncc.storageGet('useCache') === null ? useCache : ncc.storageGet('useCache'),
  fixedHeader: ncc.storageGet('fixedHeader') === null ? fixedHeader : ncc.storageGet('fixedHeader'),
  sidebarLogo: ncc.storageGet('sidebarLogo') === null ? sidebarLogo : ncc.storageGet('sidebarLogo'),
  themeClass: ncc.storageGet('themeClass') === null ? themeClass : ncc.storageGet('themeClass'),
  slideClass: ncc.storageGet('slideClass') === null ? slideClass : ncc.storageGet('slideClass'),
  layoutType: ncc.storageGet('layoutType') === null ? layoutType : ncc.storageGet('layoutType')
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
      ncc.storageSet({
        [key]: value
      })
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}