import * as React from 'react';
import { Validation, ValidationState } from '../../models/Validation';
import { Company } from '../../models/company';
import { Query } from '../../models/query';
import { Colors } from '../../models/colors';
import { AutoCompleteProps } from '../../containers/autocomplete/Autocomplete';
import { TooltipProps } from '../../containers/tooltip/Tooltip';
import TooltipOne from '../../components/tooltips/tooltip-one/TooltipOne';
import AutocompleteLeftDot from '../../components/autocompletes/autocomplete-left-dot/AutocompleteLeftDot';

const debounce = require('debounce');

interface CompanyInfoProps {
	name: string;
	palette?: Colors;
	validationState?: Validation;
	automationName?: string;
	required?: boolean;
	value?: { title?: string; number?: string };
	autocomplete?: React.ReactElement<AutoCompleteProps>;
	tooltip?: React.ReactElement<TooltipProps>;
	notifyValidity?: (name: string, state: ValidationState, errorMessage?: string) => void;
	onChange?: (name: string, value: any) => void;
	translator?: Function;
	checkIfTranslateExist?: Function;
	query?: Query;
}

interface CompanyInfoState {
	companies: Company[];
}
export default class CompanyInfo extends React.PureComponent<CompanyInfoProps, CompanyInfoState> {
	constructor(props: CompanyInfoProps) {
		super(props);
		this.state = {
			companies: []
		};
		this.onChange = debounce(this.onChange, 200);
	}

	onChange = (name: string, value: string) => {
		if (value.length > 2) {
			// axios
			// 	.post('/company-info', { searchValue: value })
			// 	.then((response: AxiosResponse) => {
			// 		this.setState({
			// 			companies: response.data.data.items
			// 		});
			// 	})
			// 	.catch(() => {
			// 		this.setState({
			// 			companies: []
			// 		});
			// 	});
			console.log(value);
		} else {
			this.setState({
				companies: []
			});
		}
		this.props.onChange(name, { title: value });
	};

	onOptionClick = (company: { label: string; id: number }) => {
		let selectedCompany = this.state.companies.find(_company => {
			return _company.companyNumber === company.id;
		});
		this.setState({
			companies: []
		});
		this.props.onChange(this.props.name, selectedCompany);
	};

	render() {
		let options = this.state.companies.map(company => {
			return {
				label: `${company.title} (${company.companyNumber})`,
				id: company.companyNumber
			};
		});

		let errorMessage;
		let valid;
		let name = this.props.name;
		let tooltip = null;
		const { title } = this.props.value || { title: '' };

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

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

		return React.cloneElement(this.props.autocomplete || <AutocompleteLeftDot />, {
			onChange: this.onChange,
			onOptionClick: this.onOptionClick,
			name,
			valid,
			errorMessage,
			palette: this.props.palette,
			label: this.props.translator(`${this.props.name}.label`),
			notifyValidity: this.props.notifyValidity,
			options,
			automationName: this.props.automationName || 'company-info',
			required: this.props.required,
			tooltip,
			value: title,
			placeholder: this.props.translator('company.placeholder'),
			noResults: this.props.translator('company.noResults'),
			validationRules: [],
			translator: this.props.translator,
			query: this.props.query
		});
	}
}