import * as React from 'react';
import { ValidationState } from '../../models/Validation';
import { validation, validationOnInit } from '../../utils/helper';
import validationRules from './../../utils/validationRules';
import { ValidationRule } from './../../models/Validation';
import { Colors } from '../../models/colors';
import { DropdownProps } from '../dropdown/Dropdown';
export interface DatePickerProps {
	palette?: Colors;
	name?: string;
	automationName?: string;
	value?: string;
	required?: boolean;
	dropDown?: React.ReactElement<DropdownProps>;
	maxAge?: number;
	minAge?: number;
	dayValid?: ValidationState;
	monthValid?: ValidationState;
	yearValid?: ValidationState;
	dateValid?: ValidationState;
	label?: string | React.ReactNode;
	errorMessage?: string | React.ReactNode;
	onChange?: (name: string, value: string) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	doNotValidate?: boolean;
	validationRules?: Array<ValidationRule>;
	translator?: Function;
}

type DatePickerContainer = DatePickerProps & {
	render: (
		onChange: (type: string) => void,
		day: string,
		month: string,
		year: string
	) => JSX.Element;
};

interface DatePickerState {
	day?: string;
	month?: string;
	year?: string;
}
class DatePicker extends React.PureComponent<DatePickerContainer, DatePickerState> {
	constructor(props: DatePickerContainer) {
		super(props);
		let year = props.value ? props.value.substring(0, 4) : '';
		let month = props.value ? props.value.substring(4, 6) : '';
		let day = props.value ? props.value.substring(6, 8) : '';
		let assignedValidationRules = Object.assign(
			[],
			this.props.validationRules || [{ name: 'date' }]
		);
		if (this.props.required) {
			assignedValidationRules.unshift({ name: 'required' });
		}
		let { state, errorMessage } = validationOnInit(
			validationRules,
			assignedValidationRules,
			`${this.props.name}.date`,
			this.props.value,
			this.props.translator
		);

		if (this.props.notifyValidity) {
			this.props.notifyValidity(`${this.props.name}.date`, state, errorMessage);
		}
		this.state = {
			day,
			month,
			year
		};
	}

	formatDayOrMonth = (value: number) => {
		return value.toLocaleString(undefined, { minimumIntegerDigits: 2 });
	};

	onChange = (type: string) => {
		return (option?: { label?: string; id?: string }) => {
			this.setState(
				{
					[type]: option.id
				},
				() => {
					if (this.state.day && this.state.month && this.state.year) {
						let assignedValidationRules = Object.assign(
							[],
							this.props.validationRules || [{ name: 'date' }]
						);
						if (this.props.required) {
							assignedValidationRules.unshift({ name: 'required' });
						}
						let dateValue = `${this.state.year}${this.formatDayOrMonth(
							+this.state.month
						)}${this.formatDayOrMonth(+this.state.day)}`;
						let { state, errorMessage } = validation(
							validationRules,
							assignedValidationRules,
							dateValue,
							`${this.props.name}.date`,
							this.props.translator
						);

						if (this.props.notifyValidity) {
							this.props.notifyValidity(`${this.props.name}.date`, state, errorMessage);
						}
						this.props.onChange(this.props.name, dateValue);
					}
				}
			);
		};
	};

	render() {
		return this.props.render(this.onChange, this.state.day, this.state.month, this.state.year);
	}
}

export default DatePicker;