import _ from 'lodash';
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

/**
 * Mixin handling everything related to the languages of the table
 */
@Component
export default class LangMixin extends Vue {
    /**
     * Object holding all the text for each default language
     */
    @Prop({type: Object, default: () => ({
        en: {
            search: 'Type in your search...',
            next: 'Next',
            previous: 'Previous',
        },
        fr: {
            search: 'Entrez votre recherche...',
            next: 'Suivant',
            previous: 'Précédent',
        },
    })}) readonly defaultLangs!: {[key: string]: {[key: string]: string}};

    /**
     * Object holding all the text for each language added by the user
     */
    @Prop({ type: Object, default: () => ({}) }) readonly langs!:
        {[key: string]: {[key: string]: string}};

    /**
     * Default lang of the table
     */
    @Prop({ type: String, default: 'en' }) readonly currentLang!: string;

    /**
     * Internal state of the component
     */
    state: {[key: string]: any} = {
        langs: _.merge({}, this.defaultLangs, this.langs),
    };

    /**
     * Helper function to translate strings
     * @param The key corresponding to a translation
     * @return The translated text or the key if no text has been found
     */
    $t(key: string): string {
        const obj = this.state.langs[this.currentLang] || {};
        if (key in obj) {
            return obj[key];
        }
        return key;
    }
}