import { AVAILABLE_LOCALES } from '@/models/available-locales';
import { i18n } from '@/plugins/vue-i18n';
import { useLocalStorage } from '@vueuse/core';
import axios from 'axios';
import { defineStore } from 'pinia';
import { computed, readonly } from 'vue';

export const useLanguageStore = defineStore('language', () => {
  const { locale } = i18n.global;

  const language = useLocalStorage(
    'lang',
    navigator.languages?.[0] || navigator.language || 'en',
  );

  const availableLocales = computed(() => AVAILABLE_LOCALES);

  /**
   * Sets the new language.
   * @param locale The new language.
   */
  function setLanguage(value: string): void {
    locale.value = value as typeof locale.value;
    language.value = value;
    axios.defaults.headers.common['Accept-Language'] = value;
    document.querySelector('html')?.setAttribute('lang', value);
  }

  return { language: readonly(language), availableLocales, setLanguage };
});