import langs from './languages';
import textField from './form/text';
import selectField from './form/select';
import textAreaField from './form/textarea';

export default ({lang, id, type, value}) => {

    const languages = langs.map(lang => {

        return {
            value: lang.code,
            label: lang.name
        }

    });

    const languageSelector = selectField({id: 'language', options: languages, value: lang});

    let field = '';

    switch( type ) {
        case 'text': default:
            field = textField({id, type, value});
        break;
        case 'textarea':
            field = textAreaField({id, type, value});
        break;
    }

    return `
        <div class="language-row" data-fieldid="${id}">
            <div class="language-row-col language">
                ${languageSelector}
            </div>
            <div class="language-row-col value">
                ${field}
            </div>
            <div class="language-row-col remove">
                <span class="dashicons dashicons-trash"></span>
            </div>
        </div>
    `;
    

}