import React, { useState } from 'react';

// Importamos os dois novos componentes que criamos
import DoctorList from '../components/doctors/DoctorList';
import DoctorForm from '../components/doctors/DoctorForm';

function DoctorCadastroManager( ) {
  // 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");

  // Estado do modal de sucesso
  const [showModal, setShowModal] = useState(false);
  const [modalMsg, setModalMsg] = useState('');

  // Função que será chamada para "salvar" o paciente
  const handleSavePatient = (patientData) => {
    console.log('Salvando médico:', 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));

    setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
    setShowModal(true);
    setView('list');
  };

  return (
    <>
      {/* Modal de feedback */}
      {showModal && (
        <div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
          <div className="modal-dialog modal-dialog-centered">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Sucesso</h5>
                <button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
              </div>
              <div className="modal-body">
                <p>{modalMsg}</p>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
              </div>
            </div>
          </div>
        </div>
      )}
      <div className="page-heading">
        <h3>Cadastro de Médicos</h3>
      </div>
      <div className="page-content">
        <section className="row">
          <div className="col-12">
            {view === 'list' ? (
              <DoctorList onAddPatient={() => setView('form')} />
            ) : (
              <DoctorForm
                onSave={handleSavePatient}
                onCancel={() => setView('list')}
                PatientDict={{}}
              />
            )}
          </div>
        </section>
      </div>
    </>
  );
}

export default DoctorCadastroManager;