import React, {useEffect, useState} from "react";
import EventDetails from "./EventDetails";
import {string} from "yup";
interface Person {
firstName: string;
lastName: string;
dob: string | null,
phoneNumber: string,
email: string,
}
interface Event {
eventId: number;
eventType: string;
createdOn: string;
eventDate: string;
startHour: string;
endHour: string;
eventStatus: boolean;
isDeleted: boolean;
trainer: Person;
students: Person[];
}
interface EventListProps {
Events: Event[];
isOpen: boolean;
onSelectedEventsChange: (selectedEvents: number[]) => void;
confirmButtonChange: () => void;
selectedEventId: number;
}
const EventList: React.FC<EventListProps & {selectedEvents: number[]}> = ({ Events, isOpen, onSelectedEventsChange, confirmButtonChange, selectedEvents, selectedEventId }) => {
const [singleEventOpen, setSingleEventOpen] = useState(false);
const [eventListOpen, setEventListOpen] = useState(isOpen);
const [clickedEvent, setClickedEvent] = useState<Event | null>(null);
const [isAllChecked, setIsAllChecked] = useState(false);
const renderStudents = (students: Person[]) => {
if (students.length !== 1) {
return <div>l. studentów = {students.length}</div>;
} else {
return (
<div>
{students.map((student, i) => (
<li key={i}>{student.firstName} {student.lastName}</li>
))}
</div>
);
}
};
const handleCheckboxChange = (eventId: number) => {
const updatedSelectedEvents = selectedEvents.includes(eventId)
? selectedEvents.filter(id => id !== eventId)
: selectedEvents.concat(eventId);
onSelectedEventsChange(updatedSelectedEvents);
};
const handleToggleAllCheckboxes = () => {
if (Events != null) {
if (selectedEvents.length === Events.length) {
onSelectedEventsChange([]);
setIsAllChecked(false);
} else {
const allEventIds = Events.map(event => event.eventId);
onSelectedEventsChange(allEventIds);
setIsAllChecked(true);
}
}
};
const handleDetailsOpen = (event: Event) => {
setSingleEventOpen(true);
setEventListOpen(false);
setClickedEvent(event);
}
const handleClosePopup = () => {
setClickedEvent(null);
};
useEffect(() => {
handleCheckboxChange(selectedEventId);
}, [selectedEventId]);
const renderEventList = () => {
return Events?.map((event, i) => (
<li key={i} className={event.eventStatus ? 'event-list-confirmed' : 'event-list-unconfirmed'}>
<label className="event-list-item">
<label className="custom-checkbox-label">
<input
type="checkbox"
className="custom-checkbox-input"
checked={selectedEvents.includes(event.eventId)}
onChange={() => handleCheckboxChange(event.eventId)}
/>
<span className="custom-checkbox"></span>
</label>
<span
className="event"
onClick={() => {
handleDetailsOpen(event);
}}
>
<span className='event-type'>{event.eventType}</span>
<span className='event-info'>{event.trainer.firstName} {event.trainer.lastName}</span>
<span className='event-info'>{renderStudents(event.students)}</span>
<span className='event-info'>{event.eventDate[2]}-{event.eventDate[1]}-{event.eventDate[0]}</span>
<span className='event-info'>
{event.startHour[0]}{event.startHour[1]}:{event.startHour[3]}{event.startHour[4]}
-{event.endHour[0]}{event.endHour[1]}:{event.endHour[3]}{event.endHour[4]}
</span>
</span>
</label>
</li>
));
};
return (
<>
{clickedEvent === null ? (
<>
<label className="custom-checkbox-label">
<input
type="checkbox"
className="custom-checkbox-input"
checked={isAllChecked}
onChange={handleToggleAllCheckboxes}
/>
<span className="custom-checkbox"></span>
Zaznacz wszystkie
</label>
<ul className="events-list">{renderEventList()}</ul>
</>
) : (
<EventDetails isOpen={true} eventDetails={clickedEvent} onRequestClose={handleClosePopup} />
)}
</>
);
};
export default EventList;