import React, { Component } from 'react';
import {
	Navbar,
	Nav,
	NavDropdown,
	//Form,
	FormControl,
	Button
} from 'react-bootstrap'; //eslint-disable-next-line
import { Link, withRouter } from 'react-router-dom';
import './css/TopBar.css';
// import PropTypes from "prop-types";

class TopBar extends Component {
	constructor(props) {
		super(props);
		this.state = {
			query: ''
		};
		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
	}

	handleChange(event) {
		this.setState({
			query: event.target.value
		});
	}
	handleSubmit(event) {
		//alert(this.state.query);
		event.preventDefault();
		event.target.reset();
		this.props.history.push('/search/'+this.state.query);
	}
	render() {
		return (
			<React.Fragment>
				<Navbar bg="dark" className="py-0 px-1 w-100" expand="md">
					<Navbar.Brand>
						<Link to="/">HazeTV</Link>
					</Navbar.Brand>
					<Navbar.Toggle aria-controls="basic-navbar-nav" />
					<Navbar.Collapse id="basic-navbar-nav">
						<Nav className="mr-auto">
							<Link to="/" className="text-light nav-link">Home</Link>
							<Link to="/link" className="text-light nav-link">link</Link>
							{/* <NavDropdown title="arnaldo" id="basic-nav-dropdown" >
								<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
								<NavDropdown.Item href="#action/3.2">
									Another action
								</NavDropdown.Item>
								<NavDropdown.Item href="#action/3.3">
									Something
								</NavDropdown.Item>
								<NavDropdown.Divider />
								<NavDropdown.Item href="#action/3.4">
									Separated link
								</NavDropdown.Item>
							</NavDropdown> */}
						</Nav>
						<form className="form-inline" onSubmit={this.handleSubmit}>
							<FormControl
								type="text"
								placeholder="Search"
								className="mr-sm-2"
								onChange={this.handleChange}
							/>
							<Button type="submit" variant="outline-success">Search</Button>
						</form>
					</Navbar.Collapse>
				</Navbar>
			</React.Fragment>
		);
	}
}

export default withRouter(TopBar);