Untitled

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;