import React, { useState } from 'react';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Table from "./pages/Table"; 

import Inicio from './pages/Inicio';
import FormLayout from './pages/FormLayout';
import EditPage from './pages/EditPage';

import Details from './pages/Details';

import DoctorTable from './pages/DoctorTable';
import DoctorFormLayout from './pages/DoctorFormLayout';
import Agendamento from './pages/Agendamento'



function App() {
  const [isSidebarActive, setIsSidebarActive] = useState(true);
  const [currentPage, setCurrentPage] = useState('Inicio');
  const [patientID, setPatientID] = useState(null);

  const toggleSidebar = () => {
    setIsSidebarActive(!isSidebarActive);
  };

  const renderPageContent = () => {
    switch (currentPage) {
      case 'Inicio':
        return <Inicio setCurrentPage={setCurrentPage} />;
      case 'agendamento':
        return <Agendamento/>;
      case 'form-layout':
        return <FormLayout />;
      case 'doctor-form-layout':
        return <DoctorFormLayout />;
      case 'table':
        return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
      case 'doctor-table':
        return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID} />;
      case 'details-page-paciente':
        return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
      case 'edit-page-paciente':
        return <EditPage id={patientID} />;
      default:
        return <Inicio setCurrentPage={setCurrentPage} />;
    }
  };

  return (
    <div id="app" className={isSidebarActive ? 'active' : ''}>
      <Sidebar isSidebarActive={isSidebarActive} setCurrentPage={setCurrentPage} />
      <div id="main">
        <Header toggleSidebar={toggleSidebar} />
        {renderPageContent()}
      </div>
    </div>
  );
}

export default App;