import { useAuth } from "../../hooks";
import "./NavBar.scss";
import { logout } from "../../api";
import { Link } from "react-router-dom/";

export default function NavBar() {
  const { user } = useAuth();

  const onLogout = () => {
    logout().then((res) => {
      if (res === "Ok") {
        window.location.reload();
      }
    });
  };

  return (
    <nav id="nav-container">
      <ul id="leafs-container">
        {user && (
          <li className="leaf">
            <Link to="/">Accueil</Link>
          </li>
        )}

        {user && (
          <li className="leaf">
            <Link to="rooms">Pieces</Link>
          </li>
        )}

        {user ? (
          <div className="leaf-into">
            <li className="leaf">
              <Link to="profile">Profil</Link>
            </li>

            <button className="leaf-btn" onClick={onLogout}>
              Deconnexion
            </button>
          </div>
        ) : (
          <li className="leaf-into">
            <span className="leaf-txt">
              <Link to="login">Connexion</Link>&nbsp;/&nbsp;
              <Link to="register">Inscription</Link>
            </span>
          </li>
        )}
      </ul>
    </nav>
  );
}
