import * as React from 'react';
import Autocomplete, { AutoCompleteProps } from '../../../containers/autocomplete/Autocomplete';
import CommonInputLeftDot from '../../common-inputs/common-input-left-dot/CommonInputLeftDot';
import DropdownList from '../../common-inputs/common-input-left-dot/inner-comps/dropdownList/DropdownList';

export default class AutocompleteLeftDot extends React.PureComponent<AutoCompleteProps> {
	render() {
		return (
			<Autocomplete
				{...this.props}
				render={(
					onChange,
					onOptionClick,
					onFocus,
					onClick,
					onKeyDown,
					value,
					opened,
					ref,
					query,
					close
				) => {
					return (
						<CommonInputLeftDot
							automationName={this.props.automationName}
							label={this.props.label || 'Autocomplete*'}
							onChange={onChange}
							type="text"
							name={this.props.name || 'autocomplete'}
							valid={this.props.valid}
							errorMessage={this.props.errorMessage}
							required={this.props.required}
							validationRules={this.props.validationRules}
							placeholder={this.props.placeholder || ''}
							notifyValidity={this.props.notifyValidity}
							open={opened}
							onKeyDown={onKeyDown}
							value={value}
							palette={this.props.palette}
							tooltip={this.props.tooltip}
							onFocus={onFocus}
							onClick={onClick}
							translator={this.props.translator}
							dropDownList={
								<DropdownList
									palette={this.props.palette}
									handleKeyDown={onKeyDown}
									ref={ref}
									onOptionClick={onOptionClick}
									options={this.props.options}
									query={query}
									close={close}
									name={this.props.name || 'autocomplete'}
									type="text"
									value={value}
									placeholder={this.props.placeholder}
									noResults={this.props.noResults}
									onKeyDown={onKeyDown}
									onChange={onChange}
								/>
							}
						/>
					);
				}}
			/>
		);
	}
}