import React, { Component } from 'react';
import PropTypes from 'prop-types';
import autobind from 'autobind-decorator';
import reduxLang from '../../middleware/lang';

@autobind
class HeaderSearchField extends Component {
	constructor(props) {
		super(props);

		this.searchInput = React.createRef();

		this.state = {
			search: ''
		};
	}

	componentDidMount() {
		this.searchInput.current.focus();
	}

	handleSearchInput(event) {
		this.setState({ search: event.target.value });
	}

	handleSearch(event) {
		event.preventDefault();
		this.props.search(this.state.search);
	}

	handleClose() {
		const { closeFunc, getCatalog, showingSearchResults } = this.props;
		if (showingSearchResults) {
			getCatalog();
		}
		
		{closeFunc &&  closeFunc() };
	}

	render() {
		const { t } = this.props;
		const { search } = this.state;
		const { showClose, getCatalog, showingSearchResults } = this.props;
		return (
			<div className='HeaderSearchField'>
				<form onSubmit={this.handleSearch}>
					<input
						className='medium-text'
						type='text'
						placeholder={t('search')}
						ref={this.searchInput}
						value={search}
						onChange={this.handleSearchInput}
					/>
				</form>
				{showClose && <button className='HeaderSearchField_closeBtn' onClick={this.handleClose}>
					<img src='/static/gfx/alps_x.svg' alt='close' />
					</button>
				}
				
			</div>
		);
	}
}

HeaderSearchField.propTypes = {
	t: PropTypes.func.isRequired,
	search: PropTypes.func.isRequired
};

export default reduxLang('HeaderSearchField')(HeaderSearchField);