
const state = {
  height:             0,
  width:              0,
  inited:             false,
  isOpenMenu:         false,
  mobile_menu_opened: false,
  show_menu:          true,
  is_enabled_menu:    true
};

const getters = {
  height:                  (state) => state.height,
  width:                   (state) => state.width,
  isOpenMenu:              (state) => state.isOpenMenu,
  menuWidth:               (state) => null,
  show_menu:               (state) => state.show_menu,
  is_enabled_menu:         (state) => state.is_enabled_menu,
};

const mutations = {
  enableScreenListener: (state) => {
    state.height = window.innerHeight
    state.width = window.innerWidth
    const acc = !!state.inited
    if (!acc) {
      window.addEventListener("resize", (e) => {
        state.height= e.target.innerHeight
        state.width = e.target.innerWidth
      });
      state.inited = true
    }
  },
  toggle_menu: (state) => {
    state.show_menu = !state.show_menu
  },
  set_mobile_menu_opened: (state, upd) => {
    state.mobile_menu_opened = upd
  },
  set_show_menu: (state, upd) => {
    state.show_menu = upd
  },
};

const actions = {
  initScreenSizeRecalc: ({commit}) => {
    commit("enableScreenListener")
  },

};

export const store = {
    namespaced: true,
    state,
    getters,
    mutations,
    actions,
};
