import React from "react";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import { useMutation } from "@apollo/client";
import Link from "next/link";
import { logout as logoutMutation } from "../../graphql/mutations/Users.gql";

const Navigation = ({ user, logoutOnClient }) => {
  const router = useRouter();
  const [logoutOnServer] = useMutation(logoutMutation);

  const handleLogout = (event) => {
    event.stopPropagation();
    logoutOnServer().then(() => {
      logoutOnClient();
      router.push("/login");
    });
  };

  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
      <div className="container">
        <Link href="/">
          <a className="navbar-brand" href="#">
            App
          </a>
        </Link>
        <button
          className="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse" id="navbarNav">
          {user && (
            <ul className="navbar-nav">
              <li className="nav-item">
                <Link href="/documents">
                  <a
                    className={`nav-link ${
                      "/documents" === router.pathname ? "active" : ""
                    }`}
                  >
                    Documents
                  </a>
                </Link>
              </li>
            </ul>
          )}
          {user ? (
            <ul className="navbar-nav ms-auto">
              <li className="nav-item dropdown">
                <a
                  href="#"
                  className="nav-link dropdown-toggle"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  {user && user.emailAddress}
                </a>
                <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li onClick={handleLogout}>
                    <a href="#" className="dropdown-item">
                      Logout
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          ) : (
            <ul className="navbar-nav ms-auto">
              <li className="nav-item">
                <Link href="/login">
                  <a
                    className={`nav-link ${
                      "/login" === router.pathname ? "active" : ""
                    }`}
                  >
                    Login
                  </a>
                </Link>
              </li>
              <li className="nav-item">
                <Link href="/signup">
                  <a
                    className={`nav-link ${
                      "/signup" === router.pathname ? "active" : ""
                    }`}
                  >
                    Signup
                  </a>
                </Link>
              </li>
            </ul>
          )}
        </div>
      </div>
    </nav>
  );
};

export default connect(
  (state) => ({
    user: state.user,
  }),
  (dispatch) => ({
    logoutOnClient: () => dispatch({ type: "LOGOUT" }),
  })
)(Navigation);