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 {
	upperTextStyle,
	checkboxStyle,
	boxStyle,
	additionalTextStyle
} from './givingYourConsent.style';
import TextBoxOne from '../../components/text-boxes/text-box-one/TextBoxOne';

interface GivingYourConsentProps {
	name: string;
	palette?: Colors;
	value?: { consentToSearch?: boolean; directorCheck?: boolean; understandProceed?: boolean };
	validationState?: {
		consentToSearch?: Validation;
		directorCheck?: Validation;
		understandProceed?: Validation;
	};
	consentToSearchRequired?: boolean;
	directorCheckRequired?: boolean;
	understandProceedRequired?: boolean;
	termsAndConditionLink?: string;
	automationName?: string;
	textBox?: React.ReactElement<TextBoxProps>;
	checkbox?: React.ReactElement<CheckboxProps>;
	onChange?: (name: string, value: any) => void;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
}

export default class GivingYourConsent extends React.PureComponent<GivingYourConsentProps> {
	onChange = (name: string, value: boolean) => {
		let _name = name.replace(this.props.name + '.', '');
		this.props.onChange(this.props.name, Object.assign({}, this.props.value, { [_name]: value }));
	};

	render() {
		let validConsentToSearch, validDirectorCheck, validUnderstandProceed;
		let checkboxConsentToSearch, checkboxDirectorCheck, checkboxUnderstandProceed;

		if (this.props.validationState) {
			validConsentToSearch = this.props.validationState.consentToSearch.state;
		}

		if (this.props.validationState) {
			validDirectorCheck = this.props.validationState.directorCheck.state;
		}

		if (this.props.validationState) {
			validUnderstandProceed = this.props.validationState.understandProceed.state;
		}

		let consentToSearchLink = (
			<a href={this.props.termsAndConditionLink} rel="noopener noreferrer" target="_blank">
				{this.props.translator(`${this.props.name}.consentToSearchLink`)}
			</a>
		);

		const { consentToSearch, understandProceed, directorCheck } = this.props.value || {
			consentToSearch: false,
			directorCheck: false,
			understandProceed: false
		};

		checkboxConsentToSearch = React.cloneElement(this.props.checkbox || <CheckboxOne />, {
			automationName: 'consentToSearch',
			palette: this.props.palette,
			id: 'consentToSearch',
			label: (
				<div>
					{this.props.translator(`${this.props.name}.consentToSearch`)}
					{consentToSearchLink}
				</div>
			),
			checked: consentToSearch,
			onChange: this.onChange,
			name: `${this.props.name}.consentToSearch`,
			required: this.props.consentToSearchRequired,
			notifyValidity: this.props.notifyValidity,
			valid: validConsentToSearch,
			translator: this.props.translator
		});

		checkboxDirectorCheck = React.cloneElement(this.props.checkbox || <CheckboxOne />, {
			automationName: 'directorCheck',
			palette: this.props.palette,
			id: 'directorCheck',
			label: this.props.translator(`${this.props.name}.directorCheck`),
			checked: directorCheck,
			onChange: this.onChange,
			name: `${this.props.name}.directorCheck`,
			required: this.props.directorCheckRequired,
			notifyValidity: this.props.notifyValidity,
			valid: validDirectorCheck,
			translator: this.props.translator
		});

		checkboxUnderstandProceed = React.cloneElement(this.props.checkbox || <CheckboxOne />, {
			automationName: 'understandProceed',
			palette: this.props.palette,
			id: 'understandProceed',
			label: this.props.translator(`${this.props.name}.understandProceed`),
			checked: understandProceed,
			onChange: this.onChange,
			name: `${this.props.name}.understandProceed`,
			required: this.props.understandProceedRequired,
			notifyValidity: this.props.notifyValidity,
			valid: validUnderstandProceed,
			translator: this.props.translator
		});

		const content = [
			<React.Fragment key="giving-your-consent">
				<div className={upperTextStyle}>
					{this.props.translator(`${this.props.name}.boxUpperContent`)}
				</div>
				<div className={checkboxStyle}>{checkboxConsentToSearch}</div>
				<div className={checkboxStyle}>{checkboxDirectorCheck}</div>
				<div className={checkboxStyle}>{checkboxUnderstandProceed}</div>
			</React.Fragment>
		];

		const box = React.cloneElement(
			this.props.textBox || <TextBoxOne />,
			{
				palette: this.props.palette,
				customStyle: boxStyle
			},
			content
		);
		return (
			<div data-automation={this.props.automationName}>
				{box}
				<p className={additionalTextStyle(this.props.palette)}>
					{this.props.translator(`${this.props.name}.additionalText`)}
				</p>
			</div>
		);
	}
}