import * as React from 'react';

import { ValidationState, Validation } from '../../models/Validation';
import { css } from 'emotion';
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 ComplyBoxProps {
	palette?: Colors;
	name: string;
	automationName?: string;
	value?: boolean;
	required?: boolean;
	validationState?: Validation;
	textBox?: React.ReactElement<TextBoxProps>;
	checkbox?: React.ReactElement<CheckboxProps>;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	onChange?: (name: string, value: boolean) => void;
	getConfig?: (name: string | string[]) => { [key: string]: any };
	translator?: Function;
	checkIfTranslateExist?: Function;
}

export default class ComplyBox extends React.PureComponent<ComplyBoxProps> {
	constructor(props: ComplyBoxProps) {
		super(props);
		if (typeof this.props.value === 'undefined') this.props.onChange(this.props.name, false);
	}

	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-comply-box',
			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 content = [
			<React.Fragment key="comply-box">
				{checkbox}
				<p>{this.props.translator(`${this.props.name}.text`)}</p>
			</React.Fragment>
		];
		return React.cloneElement(
			this.props.textBox || <TextBoxOne />,
			{
				palette: this.props.palette,
				customStyle: css`
					padding: 13px 14px 15px;
					margin-top: 15px;
					font-size: 14rem;
					p {
						margin: 0;
						margin-top: 5px;
					}
				`
			},
			content
		);
	}
}
