import { defineStore } from 'pinia';
import OtaClient from '@crowdin/ota-client';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { ISO_LANGUAGES } from '@/models/iso-languages';
import { CountryNames } from '@3cr/viewer-types-ts';

const otaClient = new OtaClient('b83ba68ca9ef508ae37a3f9gf2f');

export const useLanguageStore = defineStore('language', () => {
  const i18n = useI18n();

  /**
   * The preferred language inferred from the browser.
   */
  const preference = computed(() => {
    return localStorage.getItem('lang') || navigator.languages?.[0] || navigator.language || 'en';
  });

  /**
   * The currently selected language.
   */
  const language = ref<string>(preference.value);

  /**
   * If an OTA language is being loaded.
   */
  const loading = ref<boolean>(false);

  /**
   * Get all the supported language for this application.
   */
  async function getLanguages(): Promise<CountryNames[]> {
    const supportedLanguages = await otaClient.listLanguages();
    return supportedLanguages.map((code) => ({ ...ISO_LANGUAGES[code], code }));
  }

  watch(
    language,
    async (locale: string) => {
      if (i18n.locale.value !== locale && !i18n.availableLocales.includes(locale)) {
        loading.value = true;
        const messages = await otaClient.getStringsByLocale(locale);
        i18n.setLocaleMessage(locale, messages);
        loading.value = false;
      }

      i18n.locale.value = locale;
      axios.defaults.headers.common['Accept-Language'] = locale;
      localStorage.setItem('lang', locale);
      document.querySelector('html')?.setAttribute('lang', locale);
    },
    { immediate: true }
  );

  return { preference, language, loading, getLanguages };
});