import * as React from 'react';
import { ValidationState } from '../../../models/Validation';

import { dateTypes } from '../../../models/dateTypes';
import DatePicker, { DatePickerProps } from '../../../containers/date-picker/DatePicker';
import DropdownLeftDot from '../../dropdowns/dropdown-left-dot/DropdownLeftDot';
import LabelWrapper from '../../common-inputs/common-input-left-dot/inner-comps/label/Label';
import WithLeftDot from '../../with-left-dot/WithLeftDot';
import { wrapperDivStyle } from './datePickerOne.style';
import { Query } from '../../../models/query';

type DatePickerOneProps = {
	dropDownPlaceholder?: string;
	translator?: Function;
	query?: Query;
} & DatePickerProps;

class DatePickerOne extends React.PureComponent<DatePickerOneProps> {
	constructor(props: DatePickerOneProps) {
		super(props);
	}

	render() {
		return (
			<DatePicker
				{...this.props}
				render={(onChange: (type: string) => void, day: string, month: string, year: string) => {
					let errorMessage;
					let validDay;
					let validMonth;
					let validYear;
					let dateValid;
					if (this.props.dayValid) {
						validDay = this.props.dayValid;
					}
					if (this.props.monthValid) {
						validMonth = this.props.monthValid;
					}
					if (this.props.yearValid) {
						validYear = this.props.yearValid;
					}
					if (this.props.dateValid) {
						dateValid = this.props.dateValid;
						if (dateValid === ValidationState.Invalid) {
							validDay = ValidationState.Invalid;
							validMonth = ValidationState.Invalid;
							validYear = ValidationState.Invalid;
						}
					}
					let dayOptions = [];
					for (let i = 1; i <= 31; i++) {
						dayOptions.push({ label: `${i}`, id: `${i}` });
					}
					let monthOptions = [
						{ label: this.props.translator(`Months.January`), id: '1' },
						{ label: this.props.translator(`Months.February`), id: '2' },
						{ label: this.props.translator(`Months.March`), id: '3' },
						{ label: this.props.translator(`Months.April`), id: '4' },
						{ label: this.props.translator(`Months.May`), id: '5' },
						{ label: this.props.translator(`Months.June`), id: '6' },
						{ label: this.props.translator(`Months.July`), id: '7' },
						{ label: this.props.translator(`Months.August`), id: '8' },
						{ label: this.props.translator(`Months.September`), id: '9' },
						{ label: this.props.translator(`Months.October`), id: '10' },
						{ label: this.props.translator(`Months.November`), id: '11' },
						{ label: this.props.translator(`Months.December`), id: '12' }
					];
					let yearOptions = [];
					let currentYear = new Date().getFullYear();
					let dayIndex = dayOptions.findIndex(dayOption => +dayOption.id == +day);
					let monthIndex = monthOptions.findIndex(option => +option.id == +month);
					for (let i = currentYear - this.props.minAge; i >= currentYear - this.props.maxAge; i--) {
						yearOptions.push({ label: `${i}`, id: `${i}` });
					}

					let Day = React.cloneElement(<DropdownLeftDot />, {
						automationName: this.props.automationName || this.props.name,
						label: this.props.translator(`${this.props.name}.day`),
						onOptionClick: onChange(dateTypes.Day),
						name: `${this.props.name}.day`,
						valid: validDay,
						errorMessage,
						notifyValidity: this.props.notifyValidity,
						palette: this.props.palette,
						value: day ? dayOptions[dayIndex].label : '',
						options: dayOptions,
						hideLeftDot: true,
						required: this.props.required,
						placeholder: this.props.dropDownPlaceholder,
						translator: this.props.translator,
						query: this.props.query
					});
					let Month = React.cloneElement(<DropdownLeftDot />, {
						automationName: this.props.automationName || this.props.name,
						label: this.props.translator(`${this.props.name}.month`),
						onOptionClick: onChange(dateTypes.Month),
						name: `${this.props.name}.month`,
						valid: validMonth,
						errorMessage,
						notifyValidity: this.props.notifyValidity,
						palette: this.props.palette,
						value: monthOptions[monthIndex] && monthOptions[monthIndex].label,
						options: monthOptions,
						hideLeftDot: true,
						required: this.props.required,
						placeholder: this.props.dropDownPlaceholder,
						translator: this.props.translator,
						query: this.props.query
					});
					let Year = React.cloneElement(<DropdownLeftDot />, {
						automationName: this.props.automationName || this.props.name,
						label: this.props.translator(`${this.props.name}.year`),
						onOptionClick: onChange(dateTypes.Year),
						name: `${this.props.name}.year`,
						valid: validYear,
						errorMessage,
						notifyValidity: this.props.notifyValidity,
						palette: this.props.palette,
						value: year,
						options: yearOptions,
						hideLeftDot: true,
						required: this.props.required,
						placeholder: this.props.dropDownPlaceholder,
						translator: this.props.translator,
						query: this.props.query
					});

					return (
						<div>
							<LabelWrapper
								label={this.props.label}
								valid={dateValid}
								name={this.props.name}
								errorMessage={this.props.errorMessage}
								palette={this.props.palette}
								required={this.props.required}
							/>
							<WithLeftDot palette={this.props.palette} valid={dateValid}>
								<div className={wrapperDivStyle}>
									{Day}
									{Month}
									{Year}
								</div>
							</WithLeftDot>
						</div>
					);
				}}
			/>
		);
	}
}

export default DatePickerOne;