import React, { useState, useEffect } from 'react';import { GetDoctorByID } from '../utils/Functions-Endpoints/Doctor';
import { GetPatientByID } from '../utils/Functions-Endpoints/Patient';
import { useAuth } from '../utils/AuthProvider';
import { useNavigate } from 'react-router-dom';
import { useMemo } from 'react';
import "./style/card-consulta.css"
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId, setShowConfirmModal, corModal, selectedID, coresConsultas, setListaConsultaID, listaConsultasID} ) => {
  const navigate = useNavigate();


  const {getAuthorizationHeader} = useAuth()
  const authHeader = getAuthorizationHeader()
  const [Paciente, setPaciente] = useState()
  const [Medico, setMedico] = useState()

  const [decidirBotton, setDecidirBotton] = useState("")

  let nameArrayPaciente = DadosConsulta?.paciente_nome?.split(' ') 
  let nameArrayMedico = DadosConsulta?.medico_nome?.split(' ')

  let indice_cor = listaConsultasID.indexOf(DadosConsulta.id)


  return (
    <div className={`container-cardconsulta container-cardconsulta-${TabelaAgendamento} ` }>

      {DadosConsulta.id?  
      
      <div className={`cardconsulta`} id={indice_cor !== -1  ? `status-card-consulta-${coresConsultas[indice_cor]}` : `status-card-consulta-${DadosConsulta.status}`}> 

      <div>
        <section className='cardconsulta-infosecundaria'>
          <p>Medico:{DadosConsulta.horario} {nameArrayMedico && nameArrayMedico.length > 0 ? nameArrayMedico[0] : ''} {nameArrayMedico && nameArrayMedico.length > 1 ? ` ${nameArrayMedico[1]}` : ''} </p>
        </section>

        <section className='cardconsulta-infoprimaria'>
          
          <p>Paciente: {nameArrayPaciente && nameArrayPaciente.length > 0 ? nameArrayPaciente[0] : ''} {nameArrayPaciente && nameArrayPaciente.length > 1 ? ` ${nameArrayPaciente[1]}` : ''}- {}

          

          </p>
        </section>
      </div>

      <div className='actions-container'>        
  <button className="btn btn-sm btn-edit-custom"
    onClick={() => {
      navigate(`edit`);
      console.log(DadosConsulta);
      setDictInfo({
        ...DadosConsulta,
        paciente_cpf: DadosConsulta?.paciente_cpf,
        paciente_nome: DadosConsulta?.paciente_nome,
        nome_medico: DadosConsulta?.medico_nome
      });
    }}
  >
    <i className="bi bi-pencil me-1"></i>
  </button>

  {indice_cor !== -1 ? (
    // ✅ Caso o ID esteja na lista
    <>
    {coresConsultas[indice_cor] === "cancelled" ?
        <button
          className="btn btn-sm btn-confirm-style"
          onClick={() => {
            console.log(DadosConsulta.id);
            setShowConfirmModal(true);
            setSelectedId(DadosConsulta.id);
          }}
        >
          <i className="bi bi-check-lg"></i>
        </button>
      :

       <button
          className="btn btn-sm btn-delete-custom-style"
          onClick={() => {
            console.log(DadosConsulta.id);
            setSelectedId(DadosConsulta.id);
            setShowDeleteModal(true);
          }}
        >
          <i className="bi bi-trash me-1"></i>
        </button>
        

        }
    </>
  ) : (
    // 🧩 Caso normal — segue a lógica do status
    <>
      {DadosConsulta.status === "cancelled" ? (
        <button
          className="btn btn-sm btn-confirm-style"
          onClick={() => {
            console.log(DadosConsulta.id);
            setShowConfirmModal(true);
            setSelectedId(DadosConsulta.id);
          }}
        >
          <i className="bi bi-check-lg"></i>
        </button>
      ) : (
        <button
          className="btn btn-sm btn-delete-custom-style"
          onClick={() => {
            console.log(DadosConsulta.id);
            setSelectedId(DadosConsulta.id);
            setShowDeleteModal(true);
          }}
        >
          <i className="bi bi-trash me-1"></i>
        </button>
      )}
    </>
  )}
</div>


      </div>
      : 
     null
      
        }

        


    </div>
  )
}

export default CardConsulta