import * as React from 'react';
import CommonInput, { CommonInputProps } from '../../../containers/common-input/CommonInput';
import { TooltipProps } from '../../../containers/tooltip/Tooltip';
import { DropdownProps } from '../../../containers/dropdown/Dropdown';
import { commonInputLeftDotStyle, leftDot } from './commonInputLeftDot.style';
import LabelWrapper from './inner-comps/label/Label';
import WithLeftDot from '../../with-left-dot/WithLeftDot';
import Input from './inner-comps/input/Input';

type CommonInputLeftDotProps = CommonInputProps &
	CommonInputDropdown &
	CommonInputPassword & {
		tooltip?: React.ReactElement<TooltipProps>;
		hideLeftDot?: boolean;
		translator?: Function;
	};

type CommonInputDropdown = {
	dropDownList?: React.ReactElement<DropdownProps>;
	showChevron?: boolean;
	open?: boolean;
};

type CommonInputPassword = {
	show?: boolean;
	toggleShowHide?: () => void;
};

class CommonInputLeftDot extends React.PureComponent<CommonInputLeftDotProps> {
	render() {
		return (
			<CommonInput
				{...this.props}
				render={(
					onChange: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void,
					onBlur: (value: string, e?: React.FocusEvent<HTMLInputElement>) => void,
					onFocus: (value: string, e?: React.FocusEvent<HTMLInputElement>) => void
				) => {
					return (
						<div className={commonInputLeftDotStyle()} data-automation={this.props.automationName}>
							<LabelWrapper
								required={this.props.required}
								label={this.props.label}
								valid={this.props.valid}
								name={this.props.name}
								errorMessage={this.props.errorMessage}
								palette={this.props.palette}
								tooltip={this.props.tooltip}
							/>
							<WithLeftDot
								palette={this.props.palette}
								valid={this.props.valid}
								customStyle={leftDot(this.props.palette, this.props.valid)}
								hideLeftDot={this.props.hideLeftDot}
							>
								<Input
									hideLeftDot={this.props.hideLeftDot}
									onChange={onChange}
									type={this.props.type}
									name={this.props.name}
									value={this.props.value}
									valid={this.props.valid}
									palette={this.props.palette}
									onFocus={onFocus}
									onClick={this.props.onClick}
									onKeyDown={this.props.onKeyDown}
									onBlur={onBlur}
									required={this.props.required}
									maxlength={this.props.maxlength}
									show={this.props.show}
									toggleShowHide={this.props.toggleShowHide}
									placeholder={this.props.placeholder}
									showChevron={this.props.showChevron}
									readOnly={this.props.readOnly}
									translator={this.props.translator}
								/>
							</WithLeftDot>
							{this.props.open && this.props.dropDownList}
						</div>
					);
				}}
			/>
		);
	}
}

export default CommonInputLeftDot;