import React, { useState } from 'react';
import AppRoutes from './routes/AppRoutes';
import CampfireAppBar from './components/AppBar';
import CampfirePanelBar from './components/PanelBar';
import Dashboard from './pages/Dashboard';
import { useNavigate, useLocation } from 'react-router-dom';
import { IconsContext } from '@progress/kendo-react-common';
import Copyright from './components/UI/Copyright';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isPanelExpanded, setIsPanelExpanded] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();

  const handleLogin = (isLoggedInState) => {
    setIsLoggedIn(isLoggedInState);
    if (isLoggedInState) {
      navigate('/dashboard');
    }
  };

  const handlePanelToggle = () => {
    setIsPanelExpanded(!isPanelExpanded);
  };

  return (
    <div>
      <div>
        <IconsContext.Provider value={{ type: 'svg' }}>
          {/* Conditionally render the AppBar when not on the login page */}
          {location.pathname !== '/login' && (
            <CampfireAppBar
              isLoggedIn={isLoggedIn}
              onLogin={handleLogin}
              onPanelToggle={handlePanelToggle} // Pass the toggle function to the AppBar
            />
          )}

          {isLoggedIn && location.pathname !== '/login' ? (
            <div className="app-layout">
              {/* Always render the PanelBar on the left */}
              <CampfirePanelBar
                isExpanded={isPanelExpanded}
                onPanelToggle={handlePanelToggle}
                isLoggedIn={isLoggedIn}
              />

              {/* Fixed width content area to prevent shifts */}
              <div className="content-area">
                <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
              </div>
            </div>
          ) : (
            // If not logged in or on the login page, just render the routes
            <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
          )}
        </IconsContext.Provider>
      </div>
      <Copyright isLoginPage={location.pathname === '/login'} isLoggedIn={isLoggedIn} onLogin={handleLogin} />
    </div>
  );
}

export default App;
