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 = () => 
	{
		this.setState({ readonly: false });
	}

	_handle_onBlur = () => 
	{
		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 }
					inputProps={{
						component: props => <input {...props} readOnly />
					}}
				/>
            </div>
        )
    }
}