import React, {Component} from 'react';
import {Provider} from 'sbx-react-core';

import {errors} from './errors';
import {groups} from './groups';

@Provider({
    lang: ['settings','lang'],
    tokens: ['tokens']
})

export default class Lang extends Component {
    render() {
        let {lang, lowercase, uppercase, isError, links, type, tokens} = this.props;



        let id = this.props.children || this.props.id;
        let targetLanguages = isError ? errors : tokens;

        if(!targetLanguages[lang])
            lang = 'en';

        if(type === 'groups') targetLanguages = groups;

        let str = targetLanguages[lang][id] ||
            targetLanguages[lang][id.toUpperCase()] ||
            targetLanguages[lang][id.toLowerCase()] ||
            id;
        let langArray = [];

        if(lowercase) str = str.toLowerCase();
        if(uppercase) str = str.toUpperCase();

        if(links) {
            const reg = /\/l\/(.*?)\/l\//m;
            str.split(' ').forEach((word, index) => {
                let link = word.match(reg);
                if(link) {
                    langArray.push(<a key={index} target="_blank" href={links[0]}>{link[0].replace(/\/l\//mg, '')}</a>)
                } else {
                    langArray.push(word + " ")
                }
            })
        } else {
            langArray = str;
        }
        return <>{langArray}</>;
    };
}