import { useState, useContext } from 'react';
import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav'
import { Link, NavLink } from 'react-router-dom';
import UserContext from '../UserContext';
import bootstrap from 'bootstrap';


export default function AppNavbar(){

	const { user } = useContext(UserContext);

	console.log(user); //checking if we received the login token

	return (
	<div>
	    <nav class="navbar navbar-expand-lg bg-body-tertiary">
	      <div class="container-fluid">
	        	<a class="navbar-brand" href="#">LUCKY
	        	</a>
	       		 	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	         			 <span class="navbar-toggler-icon"></span>
	        		</button>
	       			<div class="collapse navbar-collapse" id="navbarNav">
	       				<ul className="navbar-nav mx-auto mb-2 mb-lg-0">
			          		<li className="nav-item active">
			            		<Nav.Link as={NavLink} to="/" exact>Home</Nav.Link>
			          		</li>
			          		<li className="nav-item">
			            		<Nav.Link as={NavLink} to="/products" exact>Products</Nav.Link>
			          		</li>

				          {(user.id !== null) ? (
				            user.isAdmin ? (
				              <>
			                <Nav.Link as={NavLink} to="/addProduct" exact>Add Product</Nav.Link>
			                <Nav.Link as={NavLink} to="/logout" exact>Logout</Nav.Link>
			                <Nav.Link as={NavLink} to="/orderhistory" exact>OrderHistory</Nav.Link>
			              </>
				            ) : (
				              <>
				                <Nav.Link as={NavLink} to="/profile" exact>Profile</Nav.Link>
				                <Nav.Link as={NavLink} to="/logout" exact>Logout</Nav.Link>
				                <Nav.Link as={NavLink} to="/orderhistory" exact>OrderHistory</Nav.Link>
				              </>
				            )
				          ) : (
				            <>
				              <Nav.Link as={NavLink} to="/login" exact>Login</Nav.Link>
				              <Nav.Link as={NavLink} to="/register" exact>Register</Nav.Link>
				            </>
		          			)}
	       				</ul>
	       			</div>
	      </div>
	    </nav>
	</div>
	);
}
