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

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.getTime !== undefined ? date : "");
		}
	}

	_handle_onFocus = () => 
	{
		this.setState({ readonly: false });
	}

	_handle_onBlur = () => 
	{
		this.setState({ readonly: true });
	}

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

		if(disabled)
		{
			return (
				<div className="date_input_wrapper" style={{ ...{ position: "relative" }, ...this.props.style }}>
					{ plain ? (
						moment(value).format("DD.MM.YYYY")
					) : (
						<>
							<DatePicker 
								//valueEditFormat={{ dateStyle: "short" }} 
								messages={ messages } 
								onFocus={ this._handle_onFocus } 
								onBlur={ this._handle_onBlur } 
								parse={ str => { return moment(str, 'DD.MM.YYYY').toDate() } } 
								id={ id } 
								placeholder={ placeholder } 
								value={ value } 
								min={ min } 
								max={ max } 
								onChange={ this._handle_onChange } 
							/>
							<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
						</>
					) }
				</div>
			)
		}
		else
		{
			return (
				<div className="date_input_wrapper" style={ this.props.style }>
					<DatePicker 
						//valueEditFormat={{ dateStyle: "short" }} 
						messages={ messages } 
						onFocus={ this._handle_onFocus } 
						onBlur={ this._handle_onBlur } 
						parse={ str => { return moment(str, 'DD.MM.YYYY').toDate() } } 
						id={ id } 
						placeholder={ placeholder } 
						value={ value } 
						min={ min } 
						max={ max } 
						onChange={ this._handle_onChange }
					/>
				</div>
			)
		}
    }
}