import React from 'react';
import { Field } from 'redux-form';
import style from './FancyFilePicker.module.sass';

const FancyFilePicker = (props) => {
    const {
        input,
        label,
        type,
        onClick,
        maxFiles,
        multiple = false,
        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 changeHandler = (e) => {
        const { input: { onChange } } = props;
        onChange(e.target.files[0])
    };

    return(
        <>
            <label>
                {label}(Максимум файлов: {maxFiles})
            </label>
            <div className={asyncValidating ? 'async-validating' : ''}>
                <input
                    accept='.jpg, .png, .jpeg'
                    type={'file'}
                    className={ styleValidationHandler() }
                    multiple={multiple}
                    onChange={changeHandler}
                />

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


export default (FancyFilePicker);