import { computed, reactive } from 'vue'

interface State {
	defaultLang: string
	availableLangs: string[]
	lang: string
}

const state: State = reactive({
	defaultLang: '',
	availableLangs: [],
	lang: 'en',
})

function $tdb<T extends { [key: string]: string }>(langEl?: T): string {
	if (!langEl) {
		console.warn('No language element provided for $tdb function')
		return ''
	}

	return langEl[state.lang] || langEl[state.defaultLang] || ''
}

export function useLang() {
	const lang = computed({
		get: () => state.lang,
		set: val => (state.lang = val),
	})

	const availableLangs = computed({
		get: () => state.availableLangs,
		set: val => (state.availableLangs = val),
	})

	const defaultLang = computed({
		get: () => state.defaultLang,
		set: val => (state.defaultLang = val),
	})

	return {
		lang,
		$tdb,
		availableLangs,
		defaultLang,
	}
}
