import React, {useState} from "react"
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap";
import useAuth from "../../Hooks/auth";
import {Link} from "react-router-dom";
import {onEnter} from "../../Helpers/keys";

export default function Header() {
  const [showMenu, setShowMenu] = useState(false);
  const {isLoggedIn, logout} = useAuth();

  return (
    <Navbar color="dark" dark expand="md">
      <NavbarBrand tag={Link} to="/">Lucifer</NavbarBrand>
      <NavbarToggler onClick={() => setShowMenu(!showMenu)}/>
      <Collapse isOpen={showMenu} navbar>
        {isLoggedIn && (
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavLink tag={Link} to="/lights">Lys</NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to="/groups">Grupper</NavLink>
            </NavItem>
            <NavItem>
              <NavLink tag={Link} to="/admin">Admin</NavLink>
            </NavItem>
            <NavItem>
              <NavLink tabIndex={0}
                       onClick={() => logout()}
                       onKeyDown={onEnter(() => logout())}>Logg ut</NavLink>
            </NavItem>
          </Nav>
        )}
      </Collapse>
    </Navbar>
  );
}