import {reactive} from "vue";

const translations = reactive({})

export default function useTranslations() {

    /**
     * Translate the given key.
     */
    const trans = (key, replace = undefined, returnKey = true) => {

        let translation = null;
        const keys = key.split('.');

        let resolvedKeyCounter = 0;
        while (resolvedKeyCounter < keys.length) {

            // Break if first key isn't resolved
            if(resolvedKeyCounter !== 0 && translation === null) break;

            if(resolvedKeyCounter === 0) translation = translations[keys[resolvedKeyCounter]] || null
            else if (translation != null) translation = translation[keys[resolvedKeyCounter]] || null;

            resolvedKeyCounter++;
        }

        if (translation === null) {
            if(returnKey) {
                console.warn('No translation for ' + key + '. Try clearing your session storage.');
                return key;
            }
            else return '';
        }

        // If we don't need to replace placeholders, return the translation
        if(replace === undefined) return translation;

        const replaceKeys = Object.keys(replace);
        replaceKeys.forEach((key) => {
            translation = translation.replace('%' + key, replace[key]);
        });

        return translation
    }

    return {
        trans
    }
}

export function appendTranslations(newTranslations) {
    Object.assign(translations, newTranslations);
}