import React, { useState, useEffect } from 'react';
import Sidebar from './components/Sidebar';
import Header from './components/Header';
import Table from "./pages/Table"; // <-- ADIÇÃO AQUI
import DataTable from "./pages/DataTable";
import Files from "./pages/files";
import EmailApp from "./pages/EmailApp";
//import ChatApp from "./pages/ChatApp";
import GalleryApp from "./pages/GalleryApp";
import FormLayout from './pages/FormLayout';
import EditPage from './pages/EditPage';
import PatientForm from "./components/patients/PatientForm";  
import Details from './pages/Details';
//import DoctorEditPage from './components/doctors/DoctorEditPage';
import DoctorTable from './pages/DoctorTable';
import DoctorFormLayout from './pages/DoctorFormLayout';

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 <DoctorFormLayout/>
  }
  else if (currentPage === 'table') {
    return <Table setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>;
  }
  else if(currentPage === 'doctor-table'){
    return <DoctorTable setCurrentPage={setCurrentPage} setPatientID={setPatientID}/>
  }
  else if (currentPage === 'data-table') {
    return <DataTable />;
  }
  else if (currentPage === 'files') {
    return <Files />;
  }
  else if (currentPage === 'email-app') {
    return <EmailApp />;
  }
  //else if (currentPage === 'chat-app') {
  //  return <ChatApp />;
  //}
  else if (currentPage === 'gallery-app') {
    return <GalleryApp />;
  }
  else if(currentPage === 'edit-page-paciente'){
    return <EditPage  id={patientID} />
  }
 // else if(currentPage === 'doctor-form-layout'){
  //  return <DoctorEditPage  id={patientID} />
  //}
  else if(currentPage === 'details-page-paciente'){
    return <Details patientID={patientID} setCurrentPage={setCurrentPage} />;
  }


    // 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;