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: "Выбрать дату",
};

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

	_handle_onChange = (date, raw) => 
	{
//		console.log("CalendarDatePicker", "_handle_onChange", { date, raw });

		const { readonly } = this.state;
		if(this.props.onChange !== undefined)
		{
			if(!readonly)
			{
				if(moment(date).isValid())
				{
					this.props.onChange(date, raw);
				}
				else
				{
					this.props.onChange(null, null);
				}
			}
		}
	}

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

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

	_parse = (str) => 
	{
		const { min, max } = this.props;
		const date = moment(str, 'DD.MM.YYYY');

		if(date.isValid())
		{
			if(min !== undefined)
			{
				const min_to_compare = moment(moment(min).format("YYYY-MM-DD 00:00:00"));
				if(date < min_to_compare)
				{
					return null;
				}
			}

			if(max !== undefined)
			{
				const max_to_compare = moment(moment(max).format("YYYY-MM-DD 00:00:00"));
				if(date > max_to_compare)
				{
					return null;
				}		
			}

			return date.toDate();
		}

		return null;
	}

	render() 
	{
		const { id, placeholder, value, min, max, disabled, plain, style, required, className } = this.props;
		const { readonly, input_value } = 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 } 
								//onKeyDown={ this._handle_onKeyDown } 
								parse={ this._parse } 
								id={ id } 
								placeholder={ placeholder } 
								value={ value !== "" && value !== undefined && value !== null ? new Date(Date.parse(moment(value, "YYYY-MM-DD").format('YYYY-MM-DD 00:00:00'))) : null } 
								min={ min !== undefined ? new Date(Date.parse(moment(min).format('YYYY-MM-DD 00:00:00'))) : undefined } 
								max={ max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : undefined } 
								onChange={ this._handle_onChange } 
								inputProps={{ required }} 
							/>
							<div style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", opacity: 0.0 }} onClick={ (event) => { event.stopPropagation(); event.preventDefault(); } }/>
						</>
					) }
				</div>
			)
		}
		else
		{
			const date_value = input_value !== undefined ? input_value : value !== "" && value !== undefined && value !== null ? new Date(Date.parse(moment(value, "YYYY-MM-DD").format('YYYY-MM-DD 00:00:00'))) : max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : null;

			return (
				<div className={ `date_input_wrapper ${ className } ${ value !== null ? "" : "date_input_wrapper_with_ph" }` } style={ this.props.style }>
					<DatePicker 
						messages={ messages } 
						onFocus={ this._handle_onFocus } 
						onBlur={ this._handle_onBlur } 
						parse={ this._parse } 
						id={ id } 
						placeholder={ placeholder } 
						value={ date_value } 
						min={ min !== undefined ? new Date(Date.parse(moment(min).format('YYYY-MM-DD 00:00:00'))) : undefined } 
						max={ max !== undefined ? new Date(Date.parse(moment(max).format('YYYY-MM-DD 00:00:00'))) : undefined } 
						onChange={ this._handle_onChange } 
						inputProps={{ required, style: { color: value !== "" && value !== undefined && value !== null ? "#212529" : input_value !== null && input_value !== undefined && input_value !== "" ? "#212529" : "#FFF" } }} 
						calendarProps={{ onCurrentDateChange: () => { console.log("onCurrentDateChange") } }} 
					/>
				</div>
			)
		}
    }
}