import * as React from "react";

type SideBarProps = {
	onSearchClick(searchString: string): void
}

export default class SideBar extends React.Component<SideBarProps> {
	state = {
		searchString: ''
	}

	handleSearchStringChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
		this.setState({ searchString: event.target.value });
	}

	clearSearchString = () => {
		this.setState({ searchString: '' });
	}

	render() {
		return (
			<React.Fragment>
				{/*<!-- Hero Section Begin -->*/}
				<section className="hero">
					<div className="container">
						<div className="row">
							<div className="col-lg-8">
								<div className="hero__search__form">
									<div>
										<input
											onChange={(e) => {
												this.handleSearchStringChange(e);
												if (e.target.value === '' && this.state.searchString !== '') {
													this.props.onSearchClick('');
												}
											}}
											onKeyDown={(e) => {
												if (e.key === "Enter" && this.state.searchString !== '') {
													this.props.onSearchClick(this.state.searchString);
												}
											}}
											value={this.state.searchString}
											className="search__form__input"
											type="text" placeholder="Název produktu, kategorie ..."
										/>
										{ this.state.searchString.length > 0 
										? <button className="search__form__clear__button" onClick={() => {this.clearSearchString(); this.props.onSearchClick('')}}>
											<i className="fas fa-times"></i>
										</button>
										: null}
										<button onClick={() => {
											if (this.state.searchString !== '') { this.props.onSearchClick(this.state.searchString) }
										}}
											className="search__form__button site-btn">VYHLEDAT
										</button>
									</div>
								</div>
							</div>
							<div className="col-lg-4">
								<div className="hero__search__phone">
									<div className="hero__search__phone__icon">
										<i className="fa fa-phone"></i>
									</div>
									<div className="hero__search__phone__text">
										<h5>+420 565 382 371</h5>
										<span>Po-Pá: 8:00/16:00</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</section>
				{/*<!-- Hero Section End -->*/}
			</React.Fragment>
		);
	}
}