import * as React from 'react';
import { ValidationState } from '../../../../../models/Validation';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { wrapperStyle, inputStyle, chevronStyle } from './input.style';
import ShowHideButton from '../showHideButton/ShowHideButton';
library.add(faChevronDown);

const Input = (props: {
	valid: ValidationState;
	type: string;
	name: string;
	value: string;
	required?: boolean;
	palette: any;
	maxlength?: number;
	show?: boolean;
	placeholder?: string;
	toggleShowHide?: () => void;
	onChange?: (value: string, e?: React.ChangeEvent<HTMLInputElement>) => void;
	onFocus?: (value: string, e?: React.FocusEvent<HTMLInputElement>) => void;
	onBlur?: (value: string, e?: React.FocusEvent<HTMLInputElement>) => void;
	onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
	onKeyDown?: (value: string, e: React.KeyboardEvent) => void;
	showChevron?: boolean;
	readOnly?: boolean;
	hideLeftDot?: boolean;
	translator?: Function;
}) => {
	let invalid = null;

	switch (props.valid) {
		case ValidationState.Valid:
			invalid = false;
			break;
		case ValidationState.Invalid:
			invalid = true;
			break;

		case ValidationState.None:
			invalid = null;
			break;
	}
	return (
		<div className={wrapperStyle}>
			<input
				readOnly={props.readOnly}
				className={inputStyle(props.palette, props.valid, props.hideLeftDot, props.showChevron)}
				onChange={e => {
					props.onChange(e.target.value, e);
				}}
				type={props.type}
				name={props.name}
				value={props.value || ''}
				onFocus={e => {
					if (props.onFocus) {
						props.onFocus(e.target.value, e);
					}
				}}
				onBlur={e => {
					if (props.onBlur) {
						props.onBlur(e.target.value, e);
					}
				}}
				required={props.required}
				aria-required={props.required}
				onClick={props.onClick}
				onKeyDown={e => {
					if (props.onKeyDown) {
						props.onKeyDown((e.target as HTMLInputElement).value, e);
					}
				}}
				aria-invalid={invalid}
				maxLength={props.maxlength}
				placeholder={props.placeholder}
			/>
			{props.toggleShowHide && (
				<ShowHideButton
					onClick={props.toggleShowHide}
					show={props.show}
					palette={props.palette}
					translator={props.translator}
				/>
			)}
			{props.showChevron && (
				<FontAwesomeIcon icon="chevron-down" className={chevronStyle(props.palette)} />
			)}
		</div>
	);
};

export default Input;