import * as React from 'react';

import { ValidationState, Validation } from '../../models/Validation';
import { Colors } from '../../models/colors';
import { TextBoxProps } from '../../containers/text-box/TextBox';
import { CheckboxProps } from '../../containers/checkbox/Checkbox';
import CheckboxOne from '../../components/checkboxes/checkbox-one/CheckboxOne';
import TextBoxOne from '../../components/text-boxes/text-box-one/TextBoxOne';

interface ApplyInTenMinProps {
	name: string;
	palette?: Colors;
	confirmed?: boolean;
	loanType: string;
	automationName?: string;
	required?: boolean;
	validationState?: Validation;
	value?: boolean;
	textBox?: React.ReactElement<TextBoxProps>;
	checkbox?: React.ReactElement<CheckboxProps>;
	onChange?: (name: string, value: boolean) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	getConfig?: (name: string | string[]) => { [key: string]: any };
	translator?: Function;
	checkIfTranslateExist?: Function;
}

export default class ApplyInTenMin extends React.PureComponent<ApplyInTenMinProps> {
	render() {
		let valid;
		if (this.props.validationState) {
			valid = this.props.validationState.state;
		}
		const checkbox = React.cloneElement(this.props.checkbox || <CheckboxOne />, {
			automationName: this.props.automationName || this.props.name,
			palette: this.props.palette,
			id: 'checkbox-apply-in-ten-min',
			label: this.props.translator(`${this.props.name}.checkboxLabel`),
			checked: this.props.value,
			onChange: this.props.onChange,
			name: this.props.name,
			required: this.props.required,
			notifyValidity: this.props.notifyValidity,
			valid,
			translator: this.props.translator
		});

		const { eligibleLink, privacyLink } = this.props.getConfig(['eligibleLink', 'privacyLink']);

		const content = [
			<React.Fragment key="apply-in-ten-minutes">
				<h2>{this.props.translator(`${this.props.name}.title`)}</h2>
				<p>{this.props.translator(`${this.props.name}.text1`, { loanType: this.props.loanType })}</p>
				<p>
					{this.props.translator(`${this.props.name}.text2`)}
					<a href={eligibleLink} rel="noopener noreferrer" target="_blank">
						{this.props.translator(`${this.props.name}.link1`)}
					</a>
					{this.props.translator(`${this.props.name}.text3`)}
				</p>
				<p>
					{this.props.translator(`${this.props.name}.text4`)}
					<a href={privacyLink} rel="noopener noreferrer" target="_blank">
						{this.props.translator(`${this.props.name}.link2`)}
					</a>
					{this.props.translator(`${this.props.name}.text5`)}
				</p>
				{checkbox}
			</React.Fragment>
		];
		return React.cloneElement(
			this.props.textBox || <TextBoxOne />,
			{ palette: this.props.palette },
			content
		);
	}
}