import * as React from 'react';
import IReactComponentProps from '../../../common/structures/IReactComponentProps';
import classnames from 'classnames';
import styles from './InputSearch.scss';
import SearchSVG from '../../../svg/search.svg';
import ObjectUtils from '../../../utils/object-utils';
import { FunctionGeneric } from '../../../common/structures/Generics';

const excludeProps = {
	className: true,
	containerClassName: true,
	containerLabel: true,
	onChange: true,
	placeholder: true,
	value: true,
};

interface IProps extends IReactComponentProps {
	className?: string;
	containerClassName?: string;
	containerLabel?: string;
	onChange?: FunctionGeneric;
	placeholder?: string;
	value?: string | number;
}

export default class InputSearch extends React.Component<IProps> {
	static defaultProps: Partial<IProps> = {
		value: '',
	};

	render () {
		const undeclaredProps = ObjectUtils.omitPropsInObject(this.props, excludeProps, true);

		return (
			<div
				className={classnames(
					this.props.containerClassName,
					styles.InputSearch_Container,
				)}
				role="search"
				aria-label={this.props.containerLabel}
			>
				<SearchSVG aria-hidden className={styles.InputSearch_Icon} />
				<input
					aria-label={this.props.placeholder}
					className={classnames(
						styles.InputSearch,
						this.props.className,
					)}
					id={this.props.id}
					onChange={this.props.onChange}
					placeholder={this.props.placeholder}
					type="text"
					value={this.props.value}
					{...undeclaredProps}
				/>
			</div>
		);
	}
}