import React from "react";
import {
  NavbarFooter,
  NavbarLogo,
  NavbarWrapper,
  NavbarAction,
  NavbarProfile,
  NavbarLogout,
  NavbarNavigation,
  NavbarNavigationList,
} from "./styled";
import Avatar from "../Avatar/Avatar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faPowerOff,
  faUserGraduate,
  faBoxArchive,
} from "@fortawesome/free-solid-svg-icons";
import { Link, useNavigate } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { logout } from "../../features/auth/auth-slice";

const Navbar = () => {
  const user = useAppSelector((state) => state.auth.user);
  const dispatch = useAppDispatch();
  const name = user?.username ?? "Fallback";
  const navigate = useNavigate();

  const handleLogout = () => {
    dispatch(logout());
    navigate("/login");
  };
  return (
    <NavbarWrapper>
      <Link to="">
        <NavbarLogo>
          <NavbarAction>
            <Avatar alt="Logo" />
          </NavbarAction>
          <h1>Logo</h1>
        </NavbarLogo>
      </Link>
      <NavbarNavigationList>
        <Link to="learn">
          <NavbarNavigation>
            <NavbarAction>
              <FontAwesomeIcon icon={faUserGraduate} size="2x" />
            </NavbarAction>
            <div>Lernen</div>
          </NavbarNavigation>
        </Link>
        <Link to="decks">
          <NavbarNavigation>
            <NavbarAction>
              <FontAwesomeIcon icon={faBoxArchive} size="2x" />
            </NavbarAction>
            <div>Stapel</div>
          </NavbarNavigation>
        </Link>
      </NavbarNavigationList>
      <Link to="profile">
        <NavbarFooter>
          <NavbarAction>
            <Avatar alt={name} />
          </NavbarAction>
          <NavbarProfile>
            <div>{name}</div>
            <div>Profile</div>
          </NavbarProfile>
          <NavbarLogout onClick={handleLogout}>
            <FontAwesomeIcon icon={faPowerOff} size="2x" />
          </NavbarLogout>
        </NavbarFooter>
      </Link>
    </NavbarWrapper>
  );
};

export default Navbar;
