import * as React from 'react';

import Dropdown, { DropdownProps } from '../../../containers/dropdown/Dropdown';
import { TooltipProps } from '../../../containers/tooltip/Tooltip';
import { Query } from '../../../models/query';
import CommonInputLeftDot from '../../common-inputs/common-input-left-dot/CommonInputLeftDot';
import DropdownList from '../../common-inputs/common-input-left-dot/inner-comps/dropdownList/DropdownList';

type DropdownLeftDotProps = DropdownProps & {
	tooltip?: React.ReactElement<TooltipProps>;
	hideLeftDot?: boolean;
	doNotValidate?: boolean;
	translator?: Function;
};

export class DropdownLeftDot extends React.Component<DropdownLeftDotProps> {
	constructor(props: DropdownProps) {
		super(props);
	}

	shouldComponentUpdate(nextProps: DropdownLeftDotProps) {
		return this.props.value !== nextProps.value || this.props.valid !== nextProps.valid;
	}

	render() {
		return (
			<Dropdown
				{...this.props}
				render={(
					onOptionClick: (option: { label: string; id: string }) => void,
					onClick: (e: React.MouseEvent<HTMLInputElement>) => void,
					onKeyDown: (
						value: string,
						e: React.KeyboardEvent,
						option?: { label: string; id: string }
					) => void,
					value: string,
					opened: boolean,
					ref: React.RefObject<HTMLUListElement>,
					query: Query,
					close: () => void
				) => {
					return (
						<CommonInputLeftDot
							doNotValidate={this.props.doNotValidate}
							automationName={this.props.automationName}
							label={this.props.label || 'Dropdown'}
							type="text"
							name={this.props.name || 'dropdown'}
							valid={this.props.valid}
							errorMessage={this.props.errorMessage}
							required={this.props.required}
							validationRules={this.props.validationRules || [{ name: 'required' }]}
							placeholder={
								this.props.placeholder ||
								this.props.translator('dropdownLeftDot.defaultOption').toString()
							}
							notifyValidity={this.props.notifyValidity}
							open={opened}
							onKeyDown={onKeyDown}
							value={value}
							palette={this.props.palette}
							tooltip={this.props.tooltip}
							onClick={onClick}
							showChevron={true}
							readOnly={true}
							hideLeftDot={this.props.hideLeftDot}
							translator={this.props.translator}
							dropDownList={
								<DropdownList
									palette={this.props.palette}
									handleKeyDown={onKeyDown}
									ref={ref}
									onOptionClick={onOptionClick}
									options={this.props.options}
									optionsWithCategories={this.props.optionsWithCategories}
									query={query}
									close={close}
									readOnly={true}
									name={this.props.name || 'dropdown'}
									type="text"
									value={value}
									placeholder={
										this.props.placeholder ||
										this.props.translator('dropdownLeftDot.defaultOption').toString()
									}
									onKeyDown={onKeyDown}
									isDropdown={true}
								/>
							}
						/>
					);
				}}
			/>
		);
	}
}

export default DropdownLeftDot;