import React from "react";
import DatePicker from "react-widgets/DatePicker";
import "react-widgets/styles.css";

const messages = { 
	moveToday: "Сегодня", 
	moveBack: "Назад",
	moveForward: "Вперед",
	dateButton: "Выбрать дату",
};

const formats = [
	'DD.MM.YYYY'
];

export default class DateInput extends React.Component 
{
	constructor(props)
	{
		super(props);
		this.state = { 
			readonly: true, 
		}
	}

	_handle_onChange = (date) => 
	{
		if(this.props.onChange !== undefined)
		{
			this.props.onChange(date);
		}
	}

	_handle_onFocus = () => 
	{
		console.log("F");
		this.setState({ readonly: false });
	}

	_handle_onBlur = () => 
	{
		console.log("B");
		this.setState({ readonly: true });
	}

	render() 
	{
		const { id, placeholder, value, min, max } = this.props;
		const { readonly } = this.state;

		return (
            <div className="date_input_wrapper">
                <DatePicker messages={ messages } onFocus={ this._handle_onFocus } onBlur={ this._handle_onBlur } parse={ formats } id={ id } placeholder={ placeholder } value={ value } min={ min } max={ max } onChange={ this._handle_onChange }/>
            </div>
        )
    }
}