import * as React from 'react';

import { ValidationState, Validation, ValidationRule } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import CommonInputLeftDot from '../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import { wrapperStyle } from './applicantName.style';

interface ApplicantNameProps {
	name: string;
	palette?: Colors;
	automationName?: string;
	value?: { first?: string; middle?: string; last?: string };
	validationState?: { first?: Validation; middle?: Validation; last?: Validation };
	showMiddleName: boolean;
	requiredFirstName?: boolean;
	requiredLastName?: boolean;
	requiredMiddleName?: boolean;
	validationRulesFirstName?: Array<ValidationRule>;
	validationRulesLastName?: Array<ValidationRule>;
	validationRulesMiddleName?: Array<ValidationRule>;
	placeholderFirstName?: string;
	placeholderLastName?: string;
	placeholderMiddleName?: string;
	input?: React.ReactElement<CommonInputProps>;
	onChange?: (name: string, value: any) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
}

export default class ApplicantName extends React.PureComponent<ApplicantNameProps> {
	private firstNameValidationRules: Array<ValidationRule>;
	private lastNameValidationRules: Array<ValidationRule>;
	private middleNameValidationRules: Array<ValidationRule>;

	constructor(props: ApplicantNameProps) {
		super(props);
		this.firstNameValidationRules = this.props.validationRulesFirstName || [
			{ name: 'alphabetAndSpecialCharacters' }
		];
		this.lastNameValidationRules = this.props.validationRulesLastName || [
			{ name: 'alphabetAndSpecialCharacters' }
		];
		this.middleNameValidationRules = this.props.validationRulesMiddleName || [];
	}

	onChange = (name: string, value: string) => {
		let _name = name.replace(this.props.name + '.', '');
		this.props.onChange(this.props.name, Object.assign({}, this.props.value, { [_name]: value }));
	};

	render() {
		let errorMessageLastName,
			validLastName,
			errorMessageMiddleName,
			validMiddleName,
			errorMessageFirstName,
			validFirstName;
		if (this.props.validationState) {
			errorMessageFirstName = this.props.validationState.first.errorMessage;
			validFirstName = this.props.validationState.first.state;
			errorMessageLastName = this.props.validationState.last.errorMessage;
			validLastName = this.props.validationState.last.state;
			errorMessageMiddleName = this.props.validationState.middle.errorMessage;
			validMiddleName = this.props.validationState.middle.state;
		}

		const { first, middle, last } = this.props.value || { first: '', middle: '', last: '' };

		const firstNameInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			label: this.props.translator(`${this.props.name}.firstNameLabel`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.first`,
			valid: validFirstName,
			errorMessage: errorMessageFirstName,
			validationRules: this.firstNameValidationRules,
			placeholder: this.props.placeholderFirstName || '',
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: first,
			required: this.props.requiredFirstName,
			automationName: 'firstName',
			translator: this.props.translator
		});

		const middleNameInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			label: this.props.translator(`${this.props.name}.middleNameLabel`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.middle`,
			valid: validMiddleName,
			errorMessage: errorMessageMiddleName,
			validationRules: this.middleNameValidationRules,
			placeholder: this.props.placeholderMiddleName || '',
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: middle,
			required: this.props.requiredMiddleName,
			automationName: 'middleName',
			translator: this.props.translator
		});

		const lastNameInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			label: this.props.translator(`${this.props.name}.lastNameLabel`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.last`,
			valid: validLastName,
			errorMessage: errorMessageLastName,
			validationRules: this.lastNameValidationRules,
			placeholder: this.props.placeholderLastName || '',
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: last,
			required: this.props.requiredLastName,
			automationName: 'lastName',
			translator: this.props.translator
		});

		return (
			<div className={wrapperStyle}>
				<div>{firstNameInput}</div>
				<div>{this.props.showMiddleName && middleNameInput}</div>
				<div>{lastNameInput}</div>
			</div>
		);
	}
}