import React, { useState, useEffect } from 'react';
import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabeladia.css";

import Spinner from '../Spinner';

const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
  const [indiceAcesso, setIndiceAcesso] = useState(null)
  const [Dia, setDia] = useState()
  const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
  const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional';

  let ListaDiasComAgendamentos = Object.keys(agendamentos)

  const [showSpinner, setShowSpinner] = useState(true);

  
useEffect(() => {
  if (!agendamentos) return;

  const dias = Object.keys(agendamentos);
  if (dias.length > 0) {
    setIndiceAcesso(0);          // começa no primeiro dia disponível
    setDia(dias[0]);             // seta o Dia inicial

  setShowSpinner(false)
  }
}, [agendamentos]);


  //console.log(Dia, "hshdhshhsdhs")

  useEffect(() => {
    setDia(ListaDiasComAgendamentos[indiceAcesso])
  }, [indiceAcesso])
  
  const formatarDataComDia = (dataISO) => {
  if (!dataISO) return '';

  const data = new Date(dataISO); // converte para objeto Date

  // nomes dos dias da semana
  const dias = [
    'Segunda-feira',
    'Terça-feira',
    'Quarta-feira',
    'Quinta-feira',
    'Sexta-feira',
    'Sábado'
  ];
  const diaSemana = dias[data.getDay()]; // 0 = Domingo, 1 = Segunda, etc.

  const dia = dataISO.split('-')[2];
  const mes = dataISO.split('-')[1];
  const ano = dataISO.split('-')[0];

  return `${diaSemana}, ${dia}/${mes}/${ano}`;
};

  return (
    <div>
        <div>
          <div id='tabela-seletor-container'>
                <button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}> <i className="bi bi-chevron-compact-left"></i></button>
                
                  
                  <p>{Dia ? formatarDataComDia(Dia) : ''}</p>
                  
                <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>  <i className="bi bi-chevron-compact-right"></i></button>
              </div>
            </div>
      <table className='tabeladiaria'>
        <thead>
          <tr>
            <th className='cabecalho-horario'>Horário</th>
            <th>{}</th>
          </tr>
        </thead>

        <tbody>
          {agendamentos[Dia]?.map((agendamento, index) => {
            
            let Data =agendamento.scheduled_at.split("T")
            let horario = Data[1].split(':')
            return(
            <tr key={index}>
              
              <td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
              <td className='mostrar-horario'>
                <div>
                  <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
                </div>
              </td>
            </tr>
          )})}
          {showSpinner &&
          <tr>
            <td colspan='2'>
            <Spinner/>
            </td>
          </tr>
          }

        </tbody>
      </table>
    </div>
  );
}

export default TabelaAgendamentoDia;