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

import { handleFetch } from '../../api/helpers';
import RootState from '../types/RootStateModel';
import TranslationStoreModel, { LanguageInfo } from '../types/TranslationStoreModel';

const namespaced = true;

const state: TranslationStoreModel = {
  languageInfos: [],
  isLoadingLanguageInfos: true
};

const actions: ActionTree<TranslationStoreModel, RootState> = {
  $init({ dispatch }) {
    dispatch('fetchLanguageInfos');
  },
  async fetchLanguageInfos({ commit }) {
    try {
      commit('isLoading', true);
      const response = await handleFetch('/translations/languages');
      commit('languageInfos', (await response.json()) as LanguageInfo[]);
    } catch (error) {
      console.error(error);
    } finally {
      commit('isLoading', false);
    }
  },

  getDisplayNameForLanguage({ state }, language: string): string | undefined {
    const languageInfo = state.languageInfos.find((l) => l.language == language);
    return languageInfo && languageInfo.displayName;
  }
};

const getters: MutationTree<TranslationStoreModel> = {
  languageInfos: (state) => (): LanguageInfo[] | undefined => {
    return state.languageInfos;
  },
  defaultLanguage: (state): string => {
    return state.languageInfos[0] && state.languageInfos[0].language;
  }
};

const mutations: MutationTree<TranslationStoreModel> = {
  languageInfos(translationsState: TranslationStoreModel, languageInfos: LanguageInfo[]) {
    translationsState.languageInfos = languageInfos;
  },
  isLoading(state, isLoading: boolean) {
    state.isLoadingLanguageInfos = isLoading;
  }
};

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