import React from 'react';
import style from './fancySelector.module.sass';
import {invert} from 'underscore';


const FancySelector = (props) => {

    const {
        input,
        label,
        type,
        values,
        onClick,
        defaultValue = 'qwe',
        isValidation = true,
        isTranslate = false,
        meta: { asyncValidating, touched, error }
    } = props;
    const objectForTranslate = invert(values);


    const styleValidationHandler = () => {

        if(touched && error && isValidation) {
            return style.inputError;
        }else if(touched && !error && isValidation) {
            return style.inputValid
        }
    };


    return(
        <>
            <label htmlFor={input.name} onClick={onClick}>
                {label}
            </label>
            <div className={asyncValidating ? 'async-validating' : style.mainContainer}>
                <select
                    {...input}
                    id={input.name}
                    className={ styleValidationHandler() }
                    value={isTranslate ? objectForTranslate[input.value] : input.value}
                    defaultValue={defaultValue}
                >
                    {
                        Object.keys(values).map((elem, i) => (
                            <option key={i}>{elem}</option>
                        ))
                    }
                </select>

                {touched && error && <span>{error}</span>}
            </div>
        </>
    );
};


export default (FancySelector);