import classes from './NavigationBar.module.css'
import { NavLink, useHistory } from "react-router-dom";
import Logo from '../Logo/Logo';
import { useContext } from 'react';
import AuthContext from '../../contexts/AuthContext';
import * as api from "./../../api/api";


const NavigationBar = () => {
  
  const history = useHistory();

  const authCtx = useContext(AuthContext);

  const logoutHandler = () => {
    history.replace("/login");
    authCtx.logout();
    api.logout(authCtx.accessToken).then((d) => {
      alert(d.success);
    });
  };

  return (
      <nav className={(authCtx.role === 'employee' ? classes.employee : classes.customer)} >
          <Logo />

          <ul>
            <li><NavLink to="/home" className={classes.link} activeClassName={classes.active}>Home</NavLink></li>
            <li><NavLink to="/jobs" className={classes.link} activeClassName={classes.active}>Jobs</NavLink></li>
            
            {authCtx.role === 'employee' && <>
              <li><NavLink to="/customers" className={classes.link} activeClassName={classes.active}>Customers</NavLink></li>
              <li><NavLink to="/employees" className={classes.link} activeClassName={classes.active}>Employees</NavLink></li>
            </>  }

              {/* <li><NavLink to="/profile" className={classes.link} activeClassName={classes.active}>My Profile</NavLink></li> */}
              <li><button onClick={logoutHandler} className={classes.link}>Logout</button></li>
          </ul>
      </nav>
  )
}

export default NavigationBar