import React, { useState }  from "react";
import {withRouter} from "react-router-dom";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from "reactstrap";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <Navbar color="dark" dark expand="md">

      <NavbarBrand href="/">
        MAWEN
      </NavbarBrand>

      {/* hamburger menu */}
      <NavbarToggler onClick={toggle} />

      <Collapse isOpen={isOpen} navbar>
        <Nav className="mr-auto" navbar>
          <NavItem>
            <NavLink href="/addition" accessKey="a">
              Addition
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/subtraktion" accessKey="s">
              Subtraktion
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/einstellungen" accessKey="e">
              Einstellungen
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink href="/hilfe" accessKey="h">
              Hilfe
            </NavLink>
          </NavItem>

        </Nav>
      </Collapse>

    </Navbar>
  );
};

export default withRouter(Navigation);