import type { Ref } from 'vue'

export const useLocale = () => useState<string>('locale', () => useDefaultLocale().value)

export const useDefaultLocale = (fallback = 'en-US') => {
    const locale = ref(fallback)
    if (process.server) {
        // Learn more about the nuxtApp interface on https://v3.nuxtjs.org/docs/usage/nuxt-app#nuxtapp-interface-advanced
        const nuxtApp = useNuxtApp()
        const reqLocale = nuxtApp.ssrContext?.req?.headers['accept-language']?.split(',')[0]
        if (reqLocale) {
            locale.value = reqLocale
        }
    } else if (process.client) {
        const navLang = navigator.language
        if (navLang) {
            locale.value = navLang
        }
    }
    return locale
}

export const useLocales = () => {
    const locale = useLocale()
    const locales = ref([
        'en-US',
        'en-GB',
        'ko-KR',
        'zh-CN',
        'ar-EG',
        'fa-IR',
        'ja-JP-u-ca-japanese'
    ])
    if (!locales.value.includes(locale.value)) {
        locales.value.unshift(locale.value)
    }
    return locales
}

// Using Intl.DateTimeFormat for language-sensitive date and time formatting
// Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
    return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
}