import * as React from 'react';

import { Validation, ValidationState } from '../../../../models/Validation';
import { Colors } from '../../../../models/colors';
import { AutoCompleteProps } from '../../../../containers/autocomplete/Autocomplete';
import { CommonInputProps } from '../../../../containers/common-input/CommonInput';
import { TooltipProps } from '../../../../containers/tooltip/Tooltip';
import { SecondaryButtonProps } from '../../../../containers/secondary-button/SecondaryButton';
import TooltipOne from '../../../../components/tooltips/tooltip-one/TooltipOne';
import AutocompleteLeftDot from '../../../../components/autocompletes/autocomplete-left-dot/AutocompleteLeftDot';
import SecondaryButtonOne from '../../../../components/secondary-buttons/secondary-button-one/SecondaryButtonOne';
import CommonInputLeftDot from '../../../../components/common-inputs/common-input-left-dot/CommonInputLeftDot';
import { addressWrapperStyle, findAddressStyles } from './postcode.style';
import { Query } from '../../../../models/query';

interface PostcodeProps {
	name: string;
	palette?: Colors;
	validationState?: Validation;
	required?: boolean;
	autocomplete?: React.ReactElement<AutoCompleteProps>;
	input?: React.ReactElement<CommonInputProps>;
	tooltip?: React.ReactElement<TooltipProps>;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	lookupButton?: React.ReactElement<SecondaryButtonProps>;
	postcodes: Array<{ label?: string; id?: number }>;
	selectedPostcode: { label?: string; id?: number };
	clickLookUpAddressButton: () => void;
	optionClick: (postcode: { label: string; id: number }) => void;
	onChange: (name: string, value: any) => void;
	showAddressInput?: boolean;
	addressString?: string;
	clickClearButton?: () => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

export default class Postcode extends React.PureComponent<PostcodeProps> {
	render() {
		let options =
			this.props.postcodes &&
			this.props.postcodes.map(postcode => {
				return {
					label: postcode,
					id: postcode
				};
			});

		let errorMessage;
		let valid;
		let name = this.props.name;
		let tooltip = null;

		if (this.props.validationState) {
			errorMessage = this.props.validationState.errorMessage;
			valid = this.props.validationState.state;
		}

		if (this.props.checkIfTranslateExist(`${name}.tooltip`)) {
			tooltip = React.cloneElement(this.props.tooltip || <TooltipOne />, {
				id: 'postcode',
				palette: this.props.palette,
				content: <p>{this.props.translator(`${name}.tooltip.content`)}</p>,
				translator: this.props.translator,
				query: this.props.query
			});
		}

		let postcodeInput = React.cloneElement(this.props.autocomplete || <AutocompleteLeftDot />, {
			onChange: this.props.onChange,
			onOptionClick: this.props.optionClick,
			name: 'postcode',
			valid,
			errorMessage,
			palette: this.props.palette,
			label: this.props.translator(`${name}.label`),
			notifyValidity: this.props.notifyValidity,
			options,
			automationName: `${name}-postcode`,
			required: this.props.required,
			tooltip,
			value: this.props.selectedPostcode ? this.props.selectedPostcode.label : '',
			noResults: this.props.translator('postcode.noResults'),
			translator: this.props.translator,
			query: this.props.query
		});

		let lookUpAddressButton = React.cloneElement(
			this.props.lookupButton || <SecondaryButtonOne />,
			{
				palette: this.props.palette,
				onClick: this.props.clickLookUpAddressButton,
				text: `${name}.lookUpAddress`,
				withInput: true,
				automationName: `${name}-look-up-address`,
				translator: this.props.translator
			}
		);

		let addressInput = React.cloneElement(this.props.input || <CommonInputLeftDot />, {
			automationName: `${this.props.name}.address`,
			label: this.props.translator(`${name}.addressLabel`),
			onChange: this.props.onChange,
			type: 'text',
			name: `${this.props.name}.address`,
			valid: ValidationState.Valid,
			errorMessage: null,
			notifyValidity: this.props.notifyValidity,
			palette: this.props.palette,
			value: this.props.addressString,
			readOnly: true,
			required: this.props.required,
			tooltip,
			translator: this.props.translator
		});

		let clearButton = React.cloneElement(this.props.lookupButton || <SecondaryButtonOne />, {
			palette: this.props.palette,
			onClick: this.props.clickClearButton,
			text: `${name}.clearAddress`,
			withInput: true,
			automationName: `${name}-clear-address`,
			translator: this.props.translator
		});

		return (
			<div className={addressWrapperStyle()}>
				{this.props.showAddressInput ? addressInput : postcodeInput}
				<span className={findAddressStyles()}>
					{this.props.showAddressInput ? clearButton : lookUpAddressButton}
				</span>
			</div>
		);
	}
}