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

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

import Details from './pages/Details';

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



function App() {
  const [isSidebarActive, setIsSidebarActive] = useState(true);
  const [currentPage, setCurrentPage] = useState('table ');

  const [patientID, setPatientID] = useState(null)




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

const renderPageContent = () => {
  if (currentPage === 'form-layout') {
    return <FormLayout/>;
  } 
  else if(currentPage === 'doctor-form-layout'){
    return <DoctorFormManager />;
  }
  else if (currentPage === 'table') {
    return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>;
  }
  else if(currentPage === 'doctor-table'){
    return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>
  }
  else if(currentPage === 'edit-page-paciente'){
    return <EditPage  id={patientID} />
  } 
  else if(currentPage === 'details-page-paciente'){
    return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
  }
  else if(currentPage === 'agendamento-page'){
    return <Agendamento setCurrentPage={setCurrentPage} />
  }
  else if(currentPage === 'edit-page-medico'){
    return <DoctorEditPage id={patientID} />

  }
  


    // Dashboard por padrão
    return (
      <>
        <div className="page-heading">
          <h3>Profile Statistics</h3>
        </div>
        <div className="page-content">
          <section className="row">
            <div className="col-12 col-lg-9">
              <div className="row">
                
                <div className="col-12 col-md-6 col-lg-8">
                </div>
              </div>
            </div>
            <div className="col-12 col-lg-3">
             
            </div>
          </section>
        </div>
      </>
    );
  };

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

export default App;
