import React from 'react';

import DatePickersN from 'react-date-picker';

export default class DatePicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: undefined,
            startDate: new Date()
        };
    }



    handleChangel = (date) => {
        this.setState({
            startDate: date
        });
    }

    render() {
        const { id, col, attributes, value, label, handleChange, formatDate, includeDates, className, pclearIcon, minDate, maxDate } = this.props;
        const labelInput = label == undefined ? "Fecha" : label;
        const clase = (className == undefined ? "" : className);
        const clearIcon = (pclearIcon == undefined ? null : true);
        const stilo = { display: !!attributes.hidden ? attributes.hidden : 'unset' };
        const _minDate = (minDate == undefined) ? null : minDate;
        const _maxDate = (maxDate == undefined) ? null : maxDate;
        return (

            <div className="row">
                <label htmlFor={id} className="col-xs-4 font-weight-bold mr-2 mt-2">{label}:</label>
                <div className={"col-xs-8"}  >
                    <DatePickersN
                        name={id}
                        id={id}
                        value={new Date(value)}
                        onChange={(date) => { handleChange(date, id) }}
                        format={formatDate}
                        disabled={attributes.readOnly}
                        clearIcon={clearIcon}
                        locale={'es-CR'}
                        minDate={_minDate}
                        maxDate={_maxDate}
                    />
                </div>
            </div>
        )
    }
}