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 './reccomenders/fvitali'
// import PropTypes from "prop-types";

class TopBar extends Component {
	state = {
		query: ''
	};
	handleChange = event => {
		this.setState({
			query: event.target.value
		});
	}
	handleSubmit = event => {
		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={{	pathname: `/video/${localStorage['lastId']}/vitali` }}  className="text-light nav-link">Vitali</Link>
							<Link to={{	pathname: `/video/${localStorage['lastId']}/recent` }}  className="text-light nav-link">Recent</Link>
							<Link to={{	pathname: `/video/${localStorage['lastId']}/random` }}  className="text-light nav-link">Random</Link>
							<Link to={{	pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
							{ <NavDropdown title="Similarity" id="basic-nav-dropdown" >
								<NavDropdown.Item href="#action/3.1">
									Artist
								</NavDropdown.Item>
								<NavDropdown.Item href="#action/3.2">
									Genre
								</NavDropdown.Item>
							</NavDropdown> }
							{ <NavDropdown title="Popolarità locale" id="basic-nav-dropdown" >
								<NavDropdown.Item href="#action/3.1">
									Assoluta
								</NavDropdown.Item>
								<NavDropdown.Item href="#action/3.2">
									Relativa
								</NavDropdown.Item>
							</NavDropdown> }
							{ <NavDropdown title="Popolarità globale" id="basic-nav-dropdown" >
							<NavDropdown.Item href="#action/3.1">
									Assoluta
								</NavDropdown.Item>
								<NavDropdown.Item href="#action/3.2">
									Relativa
								</NavDropdown.Item>
							</NavDropdown> }
							{ <NavDropdown title="Progetti" 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);