import React, { useEffect, useState } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useDailyRecord } from '../../hooks/useDailyRecord';
import RegistroEvento from './DailyRecordEvent';
import DailyRecord from './DailyRecord/DailyRecord';
import {
IonButton,
IonButtons,
IonContent,
IonHeader,
IonIcon,
IonModal,
IonTitle,
IonToolbar
} from '@ionic/react';
import { close } from 'ionicons/icons';
const Calendar = ({ user, isOpen, onClose }) => {
const { getDailyRecord } = useDailyRecord();
const [eventos, setEventos] = useState([]);
const [selectedEvent, setSelectedEvent] = useState(null);
useEffect(() => {
const cargarRegistros = async () => {
const registros = await getDailyRecord(user.id);
if (Array.isArray(registros)) {
const eventosFormateados = registros.map(reg => ({
id: reg.id,
title: 'Registro Diarios',
date: reg.date,
extendedProps: {
recordId: reg.id,
recordDate: reg.date,
horasSueno: reg.horasSueno,
ejercicio: reg.ejercicio,
energia: reg.energia,
estadoAnimo: reg.estadoAnimo,
motivacion: reg.motivacion,
comentario: reg.comentario
}
}));
setEventos(eventosFormateados);
}
};
cargarRegistros();
}, [getDailyRecord, user.id]);
const renderRegistroContent = (eventInfo) => {
return <RegistroEvento eventInfo={eventInfo} />;
};
return (
<IonModal isOpen={isOpen} onDidDismiss={onClose} className="calendar-modal">
<IonContent>
<IonHeader>
<IonToolbar>
<IonTitle>Calendario de registros</IonTitle>
<IonButtons slot="end">
<IonButton onClick={onClose}>
<IonIcon icon={close} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<FullCalendar
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
height="90%"
width="90%"
events={eventos}
eventContent={renderRegistroContent}
eventClick={(info) => {
info.jsEvent.preventDefault();
setSelectedEvent(info);
}}
/>
{selectedEvent && (
<DailyRecord
eventInfo={selectedEvent}
onClose={() => setSelectedEvent(null)}
/>
)}
</IonContent>
</IonModal>
);
};
