import { ActionContext, ActionTree, GetterTree, Module, MutationTree } from 'vuex';

// @ts-ignore
import { router } from '../../router';
import RootState from '../types/RootStateModel';
import RootStateModel from '../types/RootStateModel';
import LanguageStoreModel from '../types/LanguageStoreModel';
import { SupportedLanguage } from '../../types/language';
import LanguageApi from '../../api/language-api';
import RouteUtils from '../../tools/route-utils';
import { RawLocation } from 'vue-router';

const namespaced = true;

const state: LanguageStoreModel = {
  initialized: false,
  all: [],
  selected: null,
  default: null,
  useMultiLanguage: false
};

const actions: ActionTree<LanguageStoreModel, RootState> = {
  async $init({ dispatch, commit }) {
    await dispatch('fetchAllLanguages');

    commit('setInitialized', true);
  },
  async fetchAllLanguages({ commit }) {
    const route = router.currentRoute;
    const { languages, useMultiLanguage } = await LanguageApi.getLanguages();
    const defaultConfiguredLanguage = languages.find(language => language.default);
    const initialSelectedLanguage = languages.find(language => language.key === route.params.lang) || defaultConfiguredLanguage || languages[0];

    if (useMultiLanguage) {
      commit('setSelected', initialSelectedLanguage)
      commit('setAllLanguages', languages);
      commit('setUseMultiLanguage', useMultiLanguage);

      if (defaultConfiguredLanguage) {
        commit('setDefault', defaultConfiguredLanguage);
      }

      if (route.params.lang !== initialSelectedLanguage.key) {
        await RouteUtils.replace({ ...route, params: { ...route.params, lang: initialSelectedLanguage.key } } as RawLocation);
      }
    }
  },
  async setSelected({ dispatch, commit }, selected: SupportedLanguage) {
    commit('setSelected', selected);

    const route = router.currentRoute;
    if (route.params.lang !== selected.key) {
      await RouteUtils.push({ ...route, params: { ...route.params, lang: selected.key } } as RawLocation);
    }

    // Update all pages to the updated language
    dispatch('pages/fetchAllPages', null, { root: true });
  },
  async setSelectedByKey({ commit, dispatch, state }, languageKey: string) {
    const selected = state.all.find(language => language.key === languageKey);
    if (selected) {
      commit('setSelected', selected);

      // Update all pages to the updated language
      dispatch('pages/fetchAllPages', null, { root: true });
    }
  },
  async deletePageTranslations({ dispatch }, languageRef: string) {
    await LanguageApi.deletePageTranslations(languageRef);

    dispatch('pages/fetchAllPages', null, { root: true });
  },
  async deleteItemTranslations(context: ActionContext<LanguageStoreModel, RootState>, languageRef: string) {
    await LanguageApi.deleteItemTranslations(languageRef);
  }
};

const mutations: MutationTree<LanguageStoreModel> = {
  setInitialized(state, initialized: boolean) {
    state.initialized = initialized;
  },
  setAllLanguages(state, all: SupportedLanguage[]) {
    state.all = all;
  },
  setSelected(state, selected: SupportedLanguage) {
    state.selected = selected;
  },
  setDefault(state, defaultLanguage: SupportedLanguage) {
    state.default = defaultLanguage;
  },
  setUseMultiLanguage(state, useMultiLanguage: boolean) {
    state.useMultiLanguage = useMultiLanguage;
  }
};

const getters: GetterTree<LanguageStoreModel, RootStateModel> = {
  selectedLanguageKey: (state) => {
    return state.selected?.key;
  }
}

export const languageStore: Module<LanguageStoreModel, RootState> = {
  namespaced,
  state,
  actions,
  mutations,
  getters
};