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 style={{ display: 'flex', minHeight: '100vh' }}>
              {/* Always render the PanelBar on the left */}
              <CampfirePanelBar
                isExpanded={isPanelExpanded}
                onPanelToggle={handlePanelToggle}
                isLoggedIn={isLoggedIn}
              >
                {/* AppRoutes are the main content of the Panel */}
                <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
              </CampfirePanelBar>

              {/* Render Dashboard on the right only when on /dashboard */}
              {location.pathname === '/dashboard' && (
                <div style={{ flex: 1, marginLeft: '100px' }}>
                  <Dashboard isLoggedIn={isLoggedIn}>
                    <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
                  </Dashboard>
                </div>
              )}
            </div>
          ) : (
            // If not logged in or on the login page, just render the routes
            <AppRoutes isLoggedIn={isLoggedIn} onLogin={handleLogin} />
          )}
        </IconsContext.Provider>
      </div>
      <Copyright />
    </div>
  );
}

export default App;
