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);
		}
	}

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

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

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

		if(disabled)
		{
			return (
				<div className="date_input_wrapper" style={{ position: "relative" }}>
					{ plain ? (
						moment(value).format("DD.MM.YYYY")
					) : (
						<>
							<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 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">
					<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>
			)
		}
    }
}