import Link from "next/link";
import { useRouter } from "next/router";
import styles from "../styles/NavBar.module.scss";
import { AiFillHome } from "react-icons/ai";
import { IoMdExit } from "react-icons/io";
import { RiUser3Fill } from "react-icons/ri";
import { useSessionContext } from "../context/session.context.js";
import { logoutRequest } from "../requests/requests.users.js";
import { notificationService } from "../services/notification.service.js";
import { isBrowser, parseClassName } from "../utils/utils.js";
import {GiHamburgerMenu} from 'react-icons/gi'
import { useState } from "react";
import { isEmpty } from "../utils//utils.js";

export default function NavBar() {
  const router = useRouter();
  const { isLogin, authData, logout } = useSessionContext();
  const[isOpen, open] = useState(false)
  return (
    <nav
      className={parseClassName([
        styles.navbar,
        isOpen ? styles.isOpen : undefined,
      ])}
    >
      <ul className={styles["links"]}>
        <li>
          <Link href={"/"}>
            <a className={styles.home}>
              <AiFillHome />
            </a>
          </Link>
        </li>
        <li>
          <Link href={"/exercices/"+(isEmpty(authData)?'public':'user')} >
            <a
              className={
                styles.link +
                " " +
                (router.route == "/exercices/[[...exo]]"
                  ? styles.selected
                  : undefined)
              }
            >
              Exercices
            </a>
          </Link>
        </li>
        <li>
          <Link href="/fiches">
            <a
              className={
                styles.link +
                " " +
                (router.route == "/fiches" ? styles.selected : undefined)
              }
            >
              Fiches PDF
            </a>
          </Link>
        </li>
        <li>
          <Link href="/room">
            <a
              className={
                styles.link +
                " " +
                (router.route == "/room" ? styles.selected : undefined)
              }
            >
              Salles
            </a>
          </Link>
        </li>
      </ul>
      <ul className={styles["session-links"]}>
        {!isEmpty(authData) && (
          <>
            <li className={styles['auth-links']}>
              {authData && (
                <Link href={"/dashboard"}>
                  <a
                    className={
                      styles.link +
                      " " +
                      styles.dashboard +
                      " " +
                      (router.route == "/dashboard"
                        ? styles.selected
                        : undefined)
                    }
                  >
                    <RiUser3Fill />
                    {authData.username}
                  </a>
                </Link>
              )}
              <a
                className={styles.logout}
                onClick={() => {
                  logout();
                }}
              >
                <IoMdExit />
              </a>
            </li>
          </>
        )}
        {isEmpty(authData) && (
            <li className={styles['auth-links']}>
              <Link href="/login">
                <a
                  className={
                    styles.link +
                    " " +
                    (router.route == "/login" ? styles.selected : undefined)
                  }
                >
                  Se connecter
                </a>
              </Link>
              <Link href="/register">
                <a
                  className={
                    styles.link +
                    " " +
                    (router.route == "/register" ? styles.selected : undefined)
                  }
                >
                  S'inscrire
                </a>
              </Link>
            </li>
        )}
        <li>
          <button
            className={styles.burger}
            onClick={() => {
              open(!isOpen);
            }}
          >
            <span>test</span>
          </button>
        </li>
      </ul>
    </nav>
  );
}