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 = ( {setCurrentPage }) => {

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

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

    else{
      setPageConsulta(false)
      
    }

  }

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

  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
            agendamentos={agendamentos}
            handleClickAgendamento={handleClickAgendamento}
          />
        )}

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

        }

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


      </div>
    </div>
  ) : (

    <FormNovaConsulta onCancel={handleClickCancel} />


  )}
</div>
  
  
  
  
  
  )
}


export default Agendamento