import React from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  FormGroup,
  Input,
  Button,
} from 'reactstrap';
import { NavLink } from 'react-router-dom';
import './NavBarAdmin.scss';

class NavBarAdmin extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  onChange(e) {
    const { fetchWineSearch } = this.props;
    fetchWineSearch(e.target.value);
  }

  toggle() {
    const { isOpen } = this.state;
    this.setState({
      isOpen: !isOpen,
    });
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div className="NavBarAdmin">
        <Navbar dark className="navbar_wrap" expand="md">
          <NavbarBrand href="/">
            <img
              className="logo_winespace"
              src="./Images/Logo.png"
              alt="the_logo"
            />
            <Button className="nvbadmin_button center" color="success">Créer une fiche</Button>
          </NavbarBrand>
          {' '}
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <FormGroup className="pt-1 pr-5">
                <Input
                  type="search"
                  name="search"
                  id="exampleSearch"
                  placeholder="Rechercher"
                  onChange={this.onChange}
                />
              </FormGroup>
              <UncontrolledDropdown className="drop_wrap" nav inNavbar>
                <DropdownToggle className="navbar_text" nav caret>
                  Mon Compte
                </DropdownToggle>
                <DropdownMenu className="dropdownMenu" right>
                  <DropdownItem className="dropdownItem">
                    Changer mot de passe
                  </DropdownItem>
                  <DropdownItem className="dropdownItem">
                    <NavLink to="/">Déconnexion</NavLink>
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

export default NavBarAdmin;