import { useState, useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import styles from "./NavbarMenu.module.scss";
import { useRouter } from "next/router";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
} from 'reactstrap';
import { getUser, logout } from "../../../../lib/requests";

export function NavbarMenu() {
  const router = useRouter();
  const [user, setUser] = useState(null)

  useEffect(async () => {
    setUser(await getUser())
  }, [])

  function logOut() {
    logout()
    router.reload()
  }

  const [isOpen, setIsOpen] = useState(false);


  const isNavLinkActive = (path) => {
    return router.pathname === path;
  }

  const toggle = () => {
    setIsOpen(!isOpen)
  }

  return (
    <div>
      <Navbar light expand="xl" className="mb-xs-2 mb-md-3 mb-lg-5">
        <NavbarBrand href="/">
          <img
            className={styles.logo}
            src="/assets/CommunityConnect_Logo.png"
          />
        </NavbarBrand>
        <NavbarToggler onClick={toggle}>
          <img
            className={styles.hamburger}
            src="/assets/hamburguer.png"
            alt="hamburguer"
            layout="fixed"
          />
        </NavbarToggler>
        <Collapse isOpen={isOpen} navbar>
          <Nav className="ms-auto" navbar>
            {(() => {
              if (!isOpen) {
                return (
                  <>
                    <NavItem className="align-self-center">
                      <a className={`${isNavLinkActive("/about") ? styles.activeNavLink : styles.navLink}`} href="/about">About</a>
                    </NavItem>
                    <NavItem className="align-self-center">
                      <a className={`${isNavLinkActive("/marketplace") ? styles.activeNavLink : styles.navLink}`} href="/marketplace">Marketplace</a>
                    </NavItem>
                    <NavItem className="align-self-center">
                      <a className={`${isNavLinkActive("/news") ? styles.activeNavLink : styles.navLink}`} href="/news">News</a>
                    </NavItem>
                    <NavItem className="align-self-center">
                      <a className={`${isNavLinkActive("/discuss") ? styles.activeNavLink : styles.navLink}`} href="/discuss">Forums</a>
                    </NavItem>
                    <NavItem className="align-self-center">
                      <a className={`${isNavLinkActive("/carbon") ? styles.activeNavLink : styles.navLink}`} href="/carbon">Carbon Footprint</a>
                    </NavItem>
                    <NavItem className="align-self-center">
                      <div className={`${styles.loginBtn}`}>
                        <a href={user == null ? "/login" : `/users/${user.id}`}>
                          <Image
                            src="/assets/profile.png"
                            height={"70"}
                            width={"120"}
                            alt="logo"
                            layout="fixed"
                          />
                        </a>

                        <div className={styles.accountActns}>
                          {user == null ? (
                            <Link href="/login">
                              <p className={styles.loginLnk}>Log In</p>
                            </Link>
                          ) : (
                            <Link href="/">
                              <p className={styles.loginLnk} onClick={logOut}>
                                Log Out
                              </p>
                            </Link>
                          )}
                        </div>
                      </div>
                    </NavItem>
                  </>)
              } else {
                return (
                  <>
                    <NavItem className={styles.collapsedLink}>
                      <a className={`${isNavLinkActive("/about") ? styles.activeNavLink : styles.navLink}`} href="/about">About</a>
                    </NavItem>
                    <NavItem className={styles.collapsedLink}>
                      <a className={`${isNavLinkActive("/marketplace") ? styles.activeNavLink : styles.navLink}`} href="/marketplace">Marketplace</a>
                    </NavItem>
                    <NavItem className={styles.collapsedLink}>
                      <a className={`${isNavLinkActive("/news") ? styles.activeNavLink : styles.navLink}`} href="/news">News</a>
                    </NavItem>
                    <NavItem className={styles.collapsedLink}>
                      <a className={`${isNavLinkActive("/discuss") ? styles.activeNavLink : styles.navLink}`} href="/discuss">Forums</a>
                    </NavItem>
                    <NavItem className={styles.collapsedLink}>
                      <a className={`${isNavLinkActive("/carbon") ? styles.activeNavLink : styles.navLink}`} href="/carbon">Carbon Footprint</a>
                    </NavItem>
                    <NavItem className={styles.collapsedLink}>
                      {user == null ?
                        (<a className={`${isNavLinkActive("/login") ? styles.activeNavLink : styles.navLink}`} href="/login">Login</a>) :
                        (<a className={`${isNavLinkActive("/profile") ? styles.activeNavLink : styles.navLink}`} href={`/users/${user.id}`} >Profile</a>)
                      }
                    </NavItem>
                  </>)
              }
            })()}
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );

}
