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

import { Colors } from '../../models/colors';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
import TooltipOne from '../../components/tooltips/tooltip-one/TooltipOne';
import CommonInputLeftDot from '../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import { Query } from '../../models/query';

interface EmailProps {
	name: string;
	label?: string;
	type?: string;
	validationState?: Validation;
	placeholder?: string;
	validationRules?: Array<ValidationRule>;
	required?: boolean;
	tooltipContent?: string;
	palette?: Colors;
	automationName?: string;
	value?: string;
	input?: React.ReactElement<CommonInputProps>;
	tooltip?: React.ReactElement<TooltipProps>;
	onChange?: (name: string, value: string) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

export default class Email extends React.PureComponent<EmailProps> {
	render() {
		const name = this.props.name || 'email';
		let errorMessage;
		let valid;
		let tooltip = null;
		if (this.props.validationState) {
			errorMessage = this.props.validationState.errorMessage;
			valid = this.props.validationState.state;
		}

		if (this.props.checkIfTranslateExist(`${this.props.name}.tooltip`)) {
			tooltip = React.cloneElement(this.props.tooltip || <TooltipOne />, {
				id: 'email',
				palette: this.props.palette,
				content: this.props.tooltipContent || (
					<React.Fragment>
						<p>{this.props.translator(`${this.props.name}.tooltip.content1`)}</p>
						<p>{this.props.translator(`${this.props.name}.tooltip.content2`)}</p>
					</React.Fragment>
				),
				translator: this.props.translator,
				query: this.props.query
			});
		}

		return React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: this.props.automationName || this.props.name,
			label: this.props.label || this.props.translator(`${this.props.name}.label`),
			onChange: this.props.onChange,
			type: 'email',
			name,
			valid,
			errorMessage,
			validationRules: this.props.validationRules || [{ name: 'email' }],
			placeholder: this.props.placeholder || '',
			notifyValidity: this.props.notifyValidity,
			tooltip,
			palette: this.props.palette,
			value: this.props.value,
			required: this.props.required,
			translator: this.props.translator
		});
	}
}