import React, { useState } from 'react';

// Importamos os dois novos componentes que criamos
import PatientList from '../components/patients/PatientList';
import PatientForm from '../components/patients/PatientForm';

function FormLayout( ) {
  // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
  const [view, setView] = useState('form');

  
  var myHeaders = new Headers();
  myHeaders.append("Content-Type", "application/json");

  // Função que será chamada para "salvar" o paciente
  const handleSavePatient = (patientData) => {
    console.log('Salvando paciente:', patientData);

    var raw = JSON.stringify(patientData)

    var requestOptions = {
      method:'POST',
      header: myHeaders,
      body:raw,
      redirect:'follow'

    }


  fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));
      
    alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
    // Após salvar, voltamos para a tela de lista
    setView('list');
  };

  return (
    <>
      <div className="page-heading">
        <h3>Cadastro de Pacientes</h3>
      </div>
      <div className="page-content">
        <section className="row">
          <div className="col-12">
            {/* Aqui está a lógica principal: */}
            {/* Se a view for 'list', mostramos a lista com o botão. */}
            {/* Se for 'form', mostramos o formulário de cadastro. */}

            {view === 'list' ? (
              <PatientList onAddPatient={() => setView('form')} />
            ) : (
              <PatientForm
                onSave={handleSavePatient}
                onCancel={() => setView('list')}
                PatientDict={{}}
               
              />
            )}
          </div>
        </section>
      </div>
    </>
  );
}

export default FormLayout;