import Vue from 'vue'
import VueI18n, { LocaleMessages } from 'vue-i18n'

Vue.use(VueI18n)

const lang = navigator.language
  ?.split('-')
  .shift()
  ?.toLowerCase()

const isLanguageSupported = (files: string[]) =>
  lang && files.find((file) => file.includes(lang))

function loadLocaleMessages(): LocaleMessages {
  const locales = require.context(
    './locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  )
  const languages = locales.keys()
  const messages: LocaleMessages = {}
  languages.forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })

  if (lang && isLanguageSupported(languages)) {
    const html = document.querySelector('html')
    html?.setAttribute('lang', lang)
  }
  return messages
}

export default new VueI18n({
  locale: lang || 'en',
  fallbackLocale: 'en',
  messages: loadLocaleMessages()
})