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'

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]
      
      return ListaDiasDatas
      }

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

  const handleClickAgendamento = (agendamento) => {
  
    if(agendamento.motivo !== 'vazio'){alert('tem')}

    else{
      setPageConsulta(true)
      
    }

  }

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

  let agendamentos = [
    { horario: '07:00', medico: 'Rogerio Cena', paciente: 'Caio Miguel', status: 'marcado', motivo:'Consulta de Rotina' },
    { horario: '07:10', satus:'vazio' },
    { horario: '07:20', medico: 'Rogerio Cena', paciente: 'Ana Paula', status: 'cancelado', motivo:'Consulta de Rotina' },
    { horario: '07:30', medico: 'Rogerio Cena', paciente: 'Bruno Lima', status: 'atendido', motivo:'Consulta de Rotina' },
    { horario: '07:40', status:'vazio'  },
    { horario: '07:50', medico: 'Rogerio Cena', paciente: 'Felipe Duarte', status: 'remarcado', motivo:'Consulta de Rotina' },
    { horario: '08:00', medico: 'Rogerio Cena', paciente: 'Carolina Alves', status: 'marcado', motivo:'2 Exames' },
    { horario: '08:10', medico: 'Rogerio Cena', paciente: 'Ricardo Gomes', status: 'em andamento', motivo:'retorno' },
    { horario: '08:20', medico: 'Rogerio Cena', paciente: 'Tatiane Ramos', status: 'marcado', motivo: '' },
    { horario: '08:30', medico: 'Rogerio Cena', paciente: 'Daniel Oliveira', status: 'atendido', motivo: '' }
  ]




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

  {!PageNovaConsulta? (
    
    <div>
      

      <div>
        <select>
          <option value="">Unidade Central</option>
          <option value="">Unidade Zona Norte</option>
          <option value="">Unidade Zona Oeste</option>
        </select>
      </div>

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

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

      <div>
        <button className="btn-buscar" onClick={() => setTabela("diario")}>
          <i className="fa-solid fa-calendar-day"></i>
          dia
        </button>
        <button className="btn-buscar" onClick={() => setTabela("semanal")}>
          <i className="fa-solid fa-calendar-day"></i>
          semana
        </button>
        <button className="btn-buscar" onClick={() => setTabela("mensal")}>
          <i className="fa-solid fa-calendar-day"></i>
          mes
        </button>

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

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

        }

        {tabela === 'mensal' && (
          <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes}/>
        )}


      </div>
    </div>
  ) : (

    <FormNovaConsulta onCancel={handleClickCancel} />


  )}
</div>
  
  
  
  
  
  )
}


export default Agendamento