// src/components/Navbar.js
import React from 'react';
import { AppBar, Toolbar, Typography, Button } from '@mui/material';
import { Link, useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { AppContext, PRIMARY_COLOR, SECONDARY_COLOR } from '../App';

export default function Navbar() {
  const navigate = useNavigate();
  const context = useContext(AppContext);
  const debugLog = (message) => {
    if (process.env.DEBUG_API) {
      console.log(message);
    }
  };
  debugLog('Context:', context);

  if (!context) {
    throw new Error('AppContext is not available');
  }

  const { setToken } = context;

  const handleLogout = () => {
    localStorage.removeItem('token');
    setToken(null);
    navigate('/login');
  };

  return (
    <AppBar position="static">
      <Toolbar sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Boxes
        </Typography>
        <Button color="inherit" component={Link} to="/api/v1/login">Login</Button>
        <Button color="inherit" component={Link} to="/api/v1/boxes">Boxes</Button>
        <Button color="inherit" component={Link} to="/api/v1/items">Items</Button>
        <Button color="inherit" component={Link} to="/api/v1/admin">Admin</Button>
        <Button color="inherit" onClick={handleLogout}>Logout</Button>
      </Toolbar>
    </AppBar>
  );
}