import React from 'react'

import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendamentoDia';
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
import { useState, useEffect } from 'react';
import dayjs from 'dayjs'
import "./style/Agendamento.css";

const Agendamento = () => {

  
    const ListarDiasdoMes = (ano, mes) => {
      let segundas = []; let tercas = []; let quartas = []; let quintas = []; let sextas = []

      
      const base = dayjs(`${ano}-${mes}-01`)
  
      const DiasnoMes= base.daysInMonth()
      for(let d = 1; d <= DiasnoMes; d++){
        
        const data = dayjs(`${ano}-${mes}-${d}`)
  
        const dia = data.format('dddd')
  
        switch(dia){
          case'Monday':
          segundas.push(d)
          break
          
          case'Tuesday':
          tercas.push(d)
          break
          
          case'Wednesday':
          quartas.push(d)
          break
  
          case'Thursday':
          quintas.push(d)
          break
  
          case'Friday':
          sextas.push(d)
        }}

        let ListaDiasDatas = [segundas,tercas, quartas, quintas,sextas]
        console.log('dentro da função', ListaDiasDatas)
      
      return ListaDiasDatas
      }

  const [tabela, setTabela] = useState('diario')
  const [PageNovaConsulta, setPageConsulta] = useState(false)

  const handleClickAgendamento = (agendamento) => {
  
    if(agendamento.status !== 'vazio')return

    else{
      setPageConsulta(true)
    }
  }

  const handleClickCancel = () => {
    setPageConsulta(false)
  }



  return(
  <div>
    <h1>Agendar nova consulta</h1>

  {!PageNovaConsulta? (
    
    <div className='atendimento-eprocura'>

      <div className='busca-atendimento'>
        <div className="">
          <i className="fa-solid fa-calendar-day"></i>
          <input type="text" placeholder="Buscar atendimento" />
        </div>

        <div>
          <select>
            <option value="" disabled selected>Agendar</option>
            <option value="">Atendimento</option>
            <option value="">Sessões</option>
            <option value="">Urgência</option>
          </select>
        </div>
      </div>
      

      <div className='unidade-selecionarprofissional'>
        <select>
          <option value="" disabled selected >Unidade</option>
          <option value="">Unidade Central</option>
          <option value="">Unidade Zona Norte</option>
          <option value="">Unidade Zona Oeste</option>
        </select>

        <input type="text" placeholder='Selecionar profissional' />

      </div>

    <div className='diadia'>
      <div>
        <button className={`btn-selecionar-tabeladia ${tabela === "diario" ? "ativo" : ""}`}
        
        onClick={() => setTabela("diario")}>
          <i className="fa-solid fa-calendar-day"></i>
          Dia
        </button>
        <button className={`btn-selecionar-tabelasemana ${tabela === 'semanal' ? 'ativo': ""}`} onClick={() => setTabela("semanal")}>
          <i className="fa-solid fa-calendar-day"></i>
          Semana
        </button>
        <button className={`btn-selecionar-tabelames ${tabela === 'mensal' ? 'ativo':''}`} onClick={() => setTabela("mensal")}>
          <i className="fa-solid fa-calendar-day"></i>
          Mês
        </button>

        {tabela === "diario" && (
          <TabelaAgendamentoDia
            handleClickAgendamento={handleClickAgendamento}
          />
        )}

        {tabela === 'semanal' && 
          <TabelaAgendamentoSemana/>
        }

        {tabela === 'mensal' && (
          <TabelaAgendamentoMes 
            ListarDiasdoMes={ListarDiasdoMes}
            aplicarCores={true}   // 🔹 Ativa a lógica de cores só no mensal
          />
        )}

      </div>
       </div>
    </div>
  ) : (

    <FormNovaConsulta onCancel={handleClickCancel} />


  )}
</div>
  
  
  
  
  
  )
}


export default Agendamento
