import * as React from 'react';

import { AddressModel } from '../../../../models/address';
import { Validation, ValidationState } from '../../../../models/Validation';
import { Colors } from '../../../../models/colors';
import CommonInputLeftDot from '../../../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import { inputContainerStyle, bodyStyle } from './manuallyAddress.style';

export default class ManuallyAddress extends React.PureComponent<{
	input?: JSX.Element;
	palette?: Colors;
	name: string;
	value?: AddressModel;
	onChange?: (name: string, value: AddressModel) => void;
	validationState?: { [name: string]: Validation };
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
}> {
	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 errorMessageAddressLine1,
			errorMessageAddressLine2,
			errorMessageAddressLine3,
			errorMessageTown,
			errorMessagePostcode,
			errorMessageCountry,
			validAddressLine1,
			validAddressLine2,
			validAddressLine3,
			validTown,
			validPostcode,
			validCountry;

		if (this.props.validationState) {
			errorMessageAddressLine1 = this.props.validationState.addressLine1.errorMessage;
			validAddressLine1 = this.props.validationState.addressLine1.state;
			errorMessageAddressLine2 = this.props.validationState.addressLine2.errorMessage;
			validAddressLine2 = this.props.validationState.addressLine2.state;
			errorMessageAddressLine3 = this.props.validationState.addressLine3.errorMessage;
			validAddressLine3 = this.props.validationState.addressLine3.state;
			errorMessageTown = this.props.validationState.town.errorMessage;
			validTown = this.props.validationState.town.state;
			errorMessagePostcode = this.props.validationState.postcode.errorMessage;
			validPostcode = this.props.validationState.postcode.state;
			errorMessageCountry = this.props.validationState.country.errorMessage;
			validCountry = this.props.validationState.country.state;
		}

		const { addressLine1, addressLine2, addressLine3, town, postcode, country } = this.props
			.value || {
			addressLine1: '',
			addressLine2: '',
			addressLine3: '',
			town: '',
			postcode: '',
			country: ''
		};

		const addressLine1Input = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.addressLine1`,
			label: this.props.translator(`manualAddressModal.addressLine1`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.addressLine1`,
			valid: validAddressLine1,
			errorMessage: errorMessageAddressLine1,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: addressLine1,
			required: true,
			translator: this.props.translator
		});

		const addressLine2Input = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.addressLine2`,
			label: this.props.translator(`manualAddressModal.addressLine2`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.addressLine2`,
			valid: validAddressLine2,
			errorMessage: errorMessageAddressLine2,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: addressLine2,
			required: false,
			translator: this.props.translator
		});

		const addressLine3Input = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.addressLine3`,
			label: this.props.translator(`manualAddressModal.addressLine3`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.addressLine3`,
			valid: validAddressLine3,
			errorMessage: errorMessageAddressLine3,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: addressLine3,
			required: false,
			translator: this.props.translator
		});

		const townInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.town`,
			label: this.props.translator(`manualAddressModal.town`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.town`,
			valid: validTown,
			errorMessage: errorMessageTown,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: town,
			required: true,
			translator: this.props.translator
		});

		const postcodeInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.postcode`,
			label: this.props.translator(`manualAddressModal.postcode`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.postcode`,
			valid: validPostcode,
			errorMessage: errorMessagePostcode,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: postcode,
			required: false,
			readOnly: true,
			translator: this.props.translator
		});

		const countryInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.country`,
			label: this.props.translator(`manualAddressModal.country`),
			onChange: this.onChange,
			type: 'text',
			name: `${this.props.name}.country`,
			valid: validCountry,
			errorMessage: errorMessageCountry,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: country,
			required: false,
			translator: this.props.translator
		});

		return (
			<div className={bodyStyle(this.props.palette)}>
				<div className={inputContainerStyle(this.props.palette)}>{addressLine1Input}</div>
				<div className={inputContainerStyle(this.props.palette)}>{addressLine2Input}</div>
				<div className={inputContainerStyle(this.props.palette)}>{addressLine3Input}</div>
				<div className={inputContainerStyle(this.props.palette)}>{townInput}</div>
				<div className={inputContainerStyle(this.props.palette)}>{postcodeInput}</div>
				<div className={inputContainerStyle(this.props.palette)}>{countryInput}</div>
			</div>
		);
	}
}