frontend/src/screens/Schedule.js

import React, { useState, useEffect } from 'react';
import { Container, Form, FormControl, FormGroup, Input, Button } from 'rsuite';
import { DateTime } from 'luxon';

import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector';
import DurationSelector from '../components/Schedule/DurationSelector';
import SelectedDates from '../components/Schedule/SelectedDates';

export default function Schedule() {
	const [eventsList, setEventsList] = useState([]);
	const [datesList, setDatesList] = useState(eventsToDates(eventsList));

	useEffect(() => {
		// Update selected dates
		let updatedDates = eventsToDates(eventsList);
		setDatesList(updatedDates);
	}, [eventsList]);

	const handleSelect = (info) => {
		let updatedEvents = [];
		let datesList = new Set();

		/// Add each date selected to datesList
		let start = DateTime.fromISO(info.startStr);
		let end = DateTime.fromISO(info.endStr);

		// Check if selection contains only one day
		let singleDay = end.toISODate() === start.plus({ days: 1 }).toISODate();

		if (singleDay) {
			// When a single date is selected
			let selectedDate = info.startStr;
			let selectedEvent = { start: selectedDate, display: 'background' };

			// If selectedEvent exists in the list, find and set its index
			let selectedEventIndex;
			for (let index = 0; index < eventsList.length; index++) {
				const eventDate = eventsList[index].start;
				if (selectedDate === eventDate) {
					// If it's the case, set current index to selectedEventIndex
					selectedEventIndex = index;
					break;
				}
			}

			if (selectedEventIndex !== undefined) {
				// If selectedEventIndex exists, remove the corresponding event from the list
				eventsList.splice(selectedEventIndex, 1);
				updatedEvents = [...eventsList];
			} else {
				// Add selected event to the list
				updatedEvents = [...eventsList, selectedEvent];
			}
			// setEventsList(updatedEvents);
		} else {
			// When a range of dates is selected
			let currentDate = start;
			while (!(+end === +currentDate)) {
				// Add currentDate to the datesList
				datesList.add(currentDate.toISODate());
				let newDate = currentDate.plus({ days: 1 });
				currentDate = newDate;
			}

			// Add each date from the eventsList to datesList
			eventsList.forEach((event) => {
				datesList.add(event.start);
			});

			// Create events from datesList and add them to updatedEvents
			datesList.forEach((date) => {
				updatedEvents.push({ start: date, display: 'background' });
			});
		}
		setEventsList(updatedEvents);
	};

	const handleClear = () => {
		setEventsList([]);
	};

	const handleDelete = (date) => {
		let currentEvent = {
			start: date.toFormat('yyyy-MM-dd'),
			display: 'background',
		};

		// Find the event corresponding to the date
		let selectedEventIndex;
		for (let index = 0; index < eventsList.length; index++) {
			const eventDate = eventsList[index].start;
			if (currentEvent.start === eventDate) {
				// When it's the case, set current index to selectedEventIndex
				selectedEventIndex = index;
				break;
			}
		}
		// Create updated eventsList
		eventsList.splice(selectedEventIndex, 1);
		let updatedEvents = [...eventsList];
		// Update the eventsList
		setEventsList(updatedEvents);
	};

	return (
		<Container>
			<h3>Schedule a meeting</h3>
			<Form>
				<FormGroup>
					<FormControl name='title' type='text' placeholder='title' />
				</FormGroup>
				<FormGroup>
					<Input
						name='description'
						componentClass='textarea'
						type='text'
						rows={3}
						placeholder='Description'
					/>
				</FormGroup>
				<FormGroup>
					<TimezonePicker />
				</FormGroup>
				<FormGroup style={{ width: 200 }}>
					<DurationSelector />
				</FormGroup>
				<FormGroup>
					<DaySelector
						eventsList={eventsList}
						handleSelect={handleSelect}
						handleClear={handleClear}
					/>
				</FormGroup>
				{datesList.length > 0 && (
					<FormGroup>
						<SelectedDates
							datesList={datesList}
							eventsList={eventsList}
							handleDelete={handleDelete}
						/>
						<Button>Confirm dates</Button>
					</FormGroup>
				)}
			</Form>
		</Container>
	);
}

// Convert events to Luxon Datetime objects
const eventsToDates = (events) => {
	let dates = [];
	events.forEach((event) => {
		dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
	});
	return dates;
};

// Convert Luxon Datetime objects to events
const datesToEvents = (dates) => {
	let events = [];
	dates.forEach((date) => {
		let event = {
			start: date.toFormat('yyyy-MM-dd'),
			display: 'background',
		};
		events.push(event);
	});
	return events;
};