import * as React from 'react';
import { Validation, ValidationState } from '../../models/Validation';
import { AddressModel } from '../../models/address';
import TimeAtAddress from './../time-at-address/TimeAtAddress';
import { Colors } from '../../models/colors';
import { AutoCompleteProps } from '../../containers/autocomplete/Autocomplete';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
import { SecondaryButtonProps } from '../../containers/secondary-button/SecondaryButton';
import { SubmitButtonProps } from '../../containers/submit-button/SubmitButton';
import { ModalProps } from '../../containers/modal/Modal';
import { CommonInputProps } from '../../containers/common-input/CommonInput';
import Address from '../address/Address';
import { Query } from '../../models/query';

interface HomeAddressProps {
	palette?: Colors;
	validationState?: { [name: string]: Validation };
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	onChange?: (name: string, value: any) => void;
	autocomplete?: React.ReactElement<AutoCompleteProps>;
	automationName?: string;
	name: string;
	required?: boolean;
	tooltip?: React.ReactElement<TooltipProps>;
	tooltipContent?: string;
	lookupButton?: React.ReactElement<SecondaryButtonProps>;
	modalSubmitButton?: React.ReactElement<SubmitButtonProps>;
	modalCancelButton?: React.ReactElement<SecondaryButtonProps>;
	modal?: React.ReactElement<ModalProps>;
	input?: React.ReactElement<CommonInputProps>;
	value?: Array<AddressModel>;
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

class HomeAddress extends React.PureComponent<HomeAddressProps> {
	constructor(props: HomeAddressProps) {
		super(props);
	}

	setTimeAtAddress = (name: string, value: string) => {
		let moreThanThreeYears = value === 'true';
		if (this.props.value && this.props.value[0]) {
			this.setAddressOnStore({ ...this.props.value[0], moreThanThreeYears }, 0);
		} else {
			this.setAddressOnStore(
				{
					addressLine1: null,
					addressLine2: null,
					addressLine3: null,
					town: null,
					country: null,
					postcode: null,
					moreThanThreeYears
				},
				0
			);
		}
	};

	setAddressOnStore = (value: AddressModel, index: number) => {
		let addressesArray: Array<AddressModel> = this.props.value ? [...this.props.value] : [];

		if (value) {
			addressesArray[index] = value;
		} else {
			addressesArray.splice(index, 1);
		}
		this.props.onChange(this.props.name, addressesArray);
	};

	render() {
		return (
			<React.Fragment>
				<Address
					{...this.props}
					name={`${this.props.name}.firstAddress`}
					value={this.props.value && this.props.value[0] ? this.props.value[0] : null}
					setAddressOnStore={(address: AddressModel) => this.setAddressOnStore(address, 0)}
					required={true}
					translator={this.props.translator}
					checkIfTranslateExist={this.props.checkIfTranslateExist}
				/>
				<TimeAtAddress
					{...this.props}
					name={`${this.props.name}.timeAtAddress.label`}
					value={
						this.props.value && this.props.value[0] ? this.props.value[0].moreThanThreeYears : true
					}
					onChange={this.setTimeAtAddress}
					translator={this.props.translator}
					checkIfTranslateExist={this.props.checkIfTranslateExist}
				/>
				{this.props.value !== undefined &&
				this.props.value[0] &&
				!this.props.value[0].moreThanThreeYears ? (
					<Address
						{...this.props}
						name={`${this.props.name}.previousAddress`}
						value={this.props.value && this.props.value[1] ? this.props.value[1] : null}
						setAddressOnStore={(address: AddressModel) => this.setAddressOnStore(address, 1)}
						translator={this.props.translator}
						checkIfTranslateExist={this.props.checkIfTranslateExist}
					/>
				) : null}
			</React.Fragment>
		);
	}
}

export default HomeAddress;