import * as React from 'react';
import { ValidationState, Validation } from '../../models/Validation';
import { ValidationRule } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { DropdownProps } from '../../containers/dropdown/Dropdown';
import { DatePickerProps } from '../../containers/date-picker/DatePicker';
import DropdownLeftDot from '../../components/dropdowns/dropdown-left-dot/DropdownLeftDot';
import DatePickerOne from '../../components/date-pickers/date-picker-one/DatePickerOne';
import { Query } from '../../models/query';

interface DateOfBirthProps {
	name: string;
	palette?: Colors;
	automationName?: string;
	value?: string;
	required?: boolean;
	validationState?: { day?: Validation; month?: Validation; year?: Validation; date?: Validation };
	validationRules?: Array<ValidationRule>;
	dropDown?: React.ReactElement<DropdownProps>;
	datePicker?: React.ReactElement<DatePickerProps>;
	onChange?: (name: string, value: string) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	getConfig?: (name: string | string[]) => { [key: string]: any };
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

export default class DateOfBirth extends React.PureComponent<DateOfBirthProps> {
	render() {
		let dayValid;
		let monthValid;
		let yearValid;
		let dateValid;
		if (this.props.validationState) {
			dayValid = this.props.validationState.day.state;
		}
		if (this.props.validationState) {
			monthValid = this.props.validationState.month.state;
		}
		if (this.props.validationState) {
			yearValid = this.props.validationState.year.state;
		}
		const { maxAge, minAge } = this.props.getConfig(['maxAge', 'minAge']);
		if (this.props.validationState && this.props.validationState.date) {
			dateValid = this.props.validationState.date.state;
		}

		return React.cloneElement(this.props.datePicker || <DatePickerOne />, {
			palette: this.props.palette,
			name: this.props.name,
			automationName: this.props.automationName,
			onChange: this.props.onChange,
			value: this.props.value,
			required: this.props.required,
			notifyValidity: this.props.notifyValidity,
			dropDown: this.props.dropDown || <DropdownLeftDot />,
			maxAge,
			minAge,
			dayValid,
			monthValid,
			yearValid,
			dateValid,
			label: this.props.translator(`${this.props.name}.label`),
			errorMessage: this.props.translator(`${this.props.name}.errorMessage`),
			doNotValidate: false,
			validationRules: this.props.validationRules || [{ name: 'date' }],
			translator: this.props.translator,
			query: this.props.query
		});
	}
}