import React, {useState} from "react"
import {Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink} from "reactstrap";
import {connect} from "react-redux";

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

  return (
    <Navbar color="dark" dark expand="md">
      <NavbarBrand href="/">Lucifer</NavbarBrand>
      <NavbarToggler onClick={() => setShowMenu(!showMenu)}/>
      <Collapse isOpen={showMenu} navbar>
        {isLoggedIn && (
          <Nav className="ml-auto" navbar>
            <NavItem>
              <NavLink href="/lights">Grupper</NavLink>
            </NavItem>
          </Nav>
        )}
      </Collapse>
    </Navbar>
  );
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn,
});

export default connect(mapStateToProps)(Header);