import _ from 'lodash'

const getDefaultState = () => ({
  theme: {
    color: {
      primary: '#1976D2',
      secondary: '#424242',
      accent: '#82B1FF'
    }
  },
  template: {
    id: null,
    version: null,
    headerTemplate: '',
    headerKeys: [],
    headerValues: [],
    landingTemplate: '',
    landingKeys: [],
    landingValues: [],
    allProductTemplate: '',
    allProductKeys: [],
    allProductValues: [],
    productTemplate: '',
    productKeys: [],
    productValues: [],
    cartTemplate: '',
    cartKeys: [],
    cartValues: [],
    orderTemplate: '',
    orderKeys: [],
    orderValues: [],
    ordersTemplate: '',
    ordersKeys: [],
    ordersValues: [],
    checkoutTemplate: '',
    checkoutKeys: [],
    checkoutValues: [],
    footerTemplate: '',
    footerKeys: [],
    footerValues: [],
    stylesheet: ''
  },
  subdomain: '',
  salePage: {
    name: '',
    logo: '',
    stockId: null,
    headerValues: [],
    landingValues: [],
    allProductValues: [],
    productValues: [],
    checkoutValues: [],
    footerValues: []
  },
  checkout: {
    promocode: {
      code: '',
      claimable: null,
      discountType: null,
      discountValue: 0,
      minRedeemType: null,
      minRedeemValue: 0
    },
    shipping: {
      name: '',
      cost: 0
    }
  },
  customer: {
    id: null,
    addressList: [],
    address: '',
    name: '',
    tel: '',
    taxId: '',
    email: ''
  },
  productCategories: [],
  productBrands: []
})
const state = getDefaultState()
const mutations = {
  SET_SUBDOMAIN (state, payload) {
    state.subdomain = payload
  },
  SET_THEME (state, payload) {
    const defaultState = getDefaultState()
    state.theme = _.defaultsDeep(payload, defaultState.theme)
  },
  SET_TEMPLATE (state, payload) {
    const defaultState = getDefaultState()
    state.template = _.defaultsDeep(payload, defaultState.template)
  },
  SET_SALEPAGE (state, payload) {
    const defaultState = getDefaultState()
    state.salePage = _.defaultsDeep(payload, defaultState.salePage)
  },
  SET_HEAD (state, payload) {
    state.head = _.cloneDeep(payload)
  },
  SET_CUSTOMER (state, payload) {
    state.customer = _.cloneDeep(payload)
  },
  SET_ADDRESS (state, payload) {
    state.customer = {
      ...state.customer,
      ...payload
    }
  },
  ADD_ADDRESSLIST (state, payload) {
    state.customer.addressList.push(payload)
  },
  SET_CHECKOUT (state, payload) {
    state.checkout = {
      ...state.checkout,
      ...payload
    }
  },
  CLEAR_CHECKOUT (state) {
    state.checkout = {
      promocode: {
        code: ''
      },
      shipping: {
        name: ''
      }
    }
  },
  SET_PRODUCT_CATEGORIES (state, payload) {
    state.productCategories = _.cloneDeep(payload)
  },
  SET_PRODUCT_BRANDS (state, payload) {
    state.productBrands = _.cloneDeep(payload)
  }
}

const actions = {
  setSubdomain ({ commit }, payload) {
    commit('SET_SUBDOMAIN', payload)
  },
  setTheme ({ commit }, payload) {
    commit('SET_THEME', _.cloneDeep(payload))
    commit('local/SET_THEME', payload, { root: true })
  },
  setTemplate ({ commit }, payload) {
    commit('SET_TEMPLATE', _.cloneDeep(payload))
  },
  setSalePage ({ commit }, payload) {
    commit('SET_SALEPAGE', _.cloneDeep(payload))
  },
  updateSalePage ({ commit, state }, payload) {
    commit('SET_SALEPAGE', _.cloneDeep({
      ...state.salePage,
      ...payload
    }))
  },
  setHead ({ commit }, payload) {
    commit('SET_HEAD', _.cloneDeep(payload))
  },
  setCustomer ({ commit }, payload) {
    commit('SET_CUSTOMER', payload)
  },
  setAddress ({ commit }, payload) {
    commit('SET_ADDRESS', payload)
  },
  addAddressList ({ commit }, payload) {
    commit('ADD_ADDRESSLIST', payload)
  },
  setCheckout ({ commit }, payload) {
    commit('SET_CHECKOUT', payload)
  },
  clearCheckout ({ commit }) {
    commit('CLEAR_CHECKOUT')
  },
  setProductCategories ({ commit }, payload) {
    commit('SET_PRODUCT_CATEGORIES', payload)
  },
  setProductBrands ({ commit }, payload) {
    commit('SET_PRODUCT_BRANDS', payload)
  }
}

const getters = {
  subdomain: (state) => state.subdomain,
  theme: (state, x, rootState) => rootState.local.theme || state.theme,
  template: (state) => state.template,
  salePage: (state) => state.salePage,
  head: (state) => state.head,
  customer: (state) => state.customer,
  checkout: (state) => state.checkout,
  productCategories: (state) => _.cloneDeep(state.productCategories),
  productBrands: (state) => _.cloneDeep(state.productBrands)
}

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