import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import { withRouter } from "react-router";

function Header(props) {


  function getNavLinkClass(path) {
    return props.location.pathname === path
      ? "nav-item active"
      : "nav-item";
  }
  return (
      <div>
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
      <span className="navbar-brand mb-0 h1">Flexitime Tool</span>
      <div className="collapse navbar-collapse">
        <ul className="navbar-nav mr-auto">
          <li className={getNavLinkClass("/")}>
            <NavLink to="/" className="nav-link" exact>
              Home
            </NavLink>
          </li>
          <li className={getNavLinkClass("/users")}>
            <NavLink to="/users" className="nav-link">
              User List
            </NavLink>
            </li>
            <li className={getNavLinkClass("/about")}>
                <NavLink to="/about" className="nav-link" exact>
                    About
                </NavLink>
            </li>
            {/*<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>*/}
          </ul>
          <div className="my-2">
            <button className="btn btn-outline-light my-2 my-sm-0" type="button">Account</button>
            </div>
          {/*<ul>*/}
          {/*  <li className={getNavLinkClass("/about") + " float-right"}>*/}
          {/*      <NavLink to="/about" className="nav-link" exact>*/}
          {/*          About*/}
          {/*      </NavLink>*/}
          {/*  </li>*/}
          {/*  </ul>*/}
      </div>

      {/*{" | "}*/}
      {/*<NavLink to="/users" activeStyle={activeStyle}>User List</NavLink>*/}
      {/*{" | "}*/}
      {/*<NavLink to="/groups" activeStyle={activeStyle}>Group List</NavLink>*/}
      {/*{" | "}*/}
      {/*<NavLink to="/about" activeStyle={activeStyle} exact>About</NavLink>*/}
      </nav>
      </div>
  );
};

export default withRouter(Header);