import React from 'react';
import { Field } from 'redux-form';

import style from './FansyInput.module.sass';

const FancyInput = (props) => {
    const {
        input,
        label,
        type,
        onClick,
        isValidation = true,
        meta: { asyncValidating, touched, error }
    } = props;


    const styleValidationHandler = () => {

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

    // const onChange = (e) => {
    //     const { input: { onChange } } = props;
    //     onChange(e.target.files[0])
    // };

    return(
        <>
            <label htmlFor={input.name} onClick={onClick}>
                {label}
            </label>
            <div className={asyncValidating ? 'async-validating' : ''}>
                <input
                    {...input}
                    id={input.name}
                    type={type}
                    className={ styleValidationHandler() }
                />

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


export default (FancyInput);