import React from 'react';
import style from './fancyDatePicker.module.sass';
import DatePicker from 'react-datepicker';
import { change } from 'redux-form';
import { connect } from 'react-redux';
import "react-datepicker/dist/react-datepicker.css";
const moment = require('moment');

const FancyDatePicker = (props) => {
    const {
        input,
        label,
        formName,
        type,
        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 changeDateHandler = (date) =>{
        props.changeDate(formName, input.name, date);
    };



    return(
        <div className={style.mainContainer}>
            <label htmlFor={input.name}>
                {label}
            </label>
            <div className={asyncValidating ? 'async-validating' : ''}>
                {/*<input*/}
                    {/*{...input}*/}
                    {/*id={input.name}*/}
                    {/*type={type}*/}
                    {/*className={ styleValidationHandler() }*/}
                {/*/>*/}
                <DatePicker
                    selected={input.value && new Date(input.value)}
                    dateFormat={'yyyy-MM-dd'}
                    onChange={changeDateHandler}
                />

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

const mapStateToProps = state => {

    return {

    }
};

const mapDispatchToProps = dispatch => ({
    changeDate: (form, field, value) => dispatch(change(form, field, value))
});


export default connect(mapStateToProps, mapDispatchToProps)(FancyDatePicker);
