import { Link } from "react-router";
import { useSession } from "./Session";
import { useState } from "react";

export default function Header() {
  const { user, teams, setTeams, players, onLogout } = useSession();
  const [burgerActive, setBurgerActive] = useState(false);
  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <Link className="navbar-item" to="/">
          <img
            style={{ maxHeight: "unset" }}
            className="image"
            alt="cool ultimate team tool"
            src="cutt.svg"
          />
        </Link>

        <a
          role="button"
          className={"navbar-burger" + (burgerActive ? " is-active" : "")}
          aria-label="menu"
          aria-expanded="false"
          data-target="navbar"
          onClick={() => setBurgerActive(!burgerActive)}
        >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>

      <div
        className={"navbar-menu" + (burgerActive ? " is-active" : "")}
        id="navbar"
      >
        {user?.scopes.includes(`team:${teams?.activeTeam}`) && (
          <div className="navbar-start">
            <Link className="navbar-item" to="/network">
              <span>Sociogram</span>
            </Link>
            <Link className="navbar-item" to="/mvp">
              <span>MVP</span>
            </Link>
            <Link className="navbar-item" to="/team">
              <span>Team</span>
            </Link>
          </div>
        )}
        <div className="navbar-end">
          {teams && (
            <div className="navbar-item has-dropdown is-hoverable">
              <a className="navbar-link">my teams</a>
              <div className="navbar-dropdown">
                {teams.teams.map((team, index) => (
                  <a
                    onClick={() => setTeams({ ...teams, activeTeam: team.id })}
                    className={
                      "navbar-item" +
                      (team.id === teams.activeTeam
                        ? " is-bold has-text-weight-extrabold"
                        : "")
                    }
                  >
                    {team.name}
                  </a>
                ))}
              </div>
            </div>
          )}
          <div className="navbar-item">
            {user?.username}
            <div className="buttons">
              <button className="button is-light" onClick={onLogout}>
                Log out
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}