import React, { useEffect, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useLocation } from "react-router-dom";
import { logout } from "../../redux/actions/auth";
import { clearMessage } from "../../redux/actions/message";

const Navbar = () => {
  const { user: currentUser } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  let location = useLocation();

  useEffect(() => {
    if (["/login", "/register"].includes(location.pathname)) {
      dispatch(clearMessage()); // clear message when changing location
    }
  }, [dispatch, location]);

  const logOut = useCallback(() => {
    dispatch(logout());
  }, [dispatch]);

  return (
    <div className="nav-bar">
      <Link to={"/"} className="nav-bar-header">
        SCHEDULEPOINTE
      </Link>
      {currentUser ? (
        <div className="nav-bar-options">
          <Link to={"/user"} className="nav-bar-text">
            User
          </Link>
          <Link to={"/profile"} className="nav-bar-text">
            {currentUser.username}
          </Link>
          <a href="/login" className="nav-bar-text" onClick={logOut}>
            Log Out
          </a>
        </div>
      ) : (
        <div className="nav-bar-options">
          <Link to={"/login"} className="nav-bar-text">
            Login
          </Link>
          <Link to={"/register"} className="nav-bar-text">
            Register
          </Link>
        </div>
      )}
    </div>
  );
};

export default Navbar;