source: my-react-app/src/components/ReservationEdit.js

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {useNavigate, useParams} from 'react-router-dom';
import StarRating from "./StarRating";
import {jwtDecode} from "jwt-decode";

const ReservationEdit = () => {
    const navigate = useNavigate();
    const { reservationId } = useParams();
    const [isLoading, setIsLoading] = useState(true);
    const [formData, setFormData] = useState({});
    const [tableNumber, setTableNumber] = useState({});
    const [table, setTable] = useState({});
    const [restaurant, setRestaurant] = useState({});
    const [restaurantId, setRestaurantId] = useState({});
    const [timeSlots, setTimeSlots] = useState([]);
    const [filteredTimeSlots, setFilteredTimeSlots] = useState([]);
    const [checkInTime, setCheckInTime] = useState([]);
    const [tableReservations, setTableReservations] = useState([]);

    const timeSlotInterval = 15;

    const [selectedDate, setSelectedDate] = useState('');
    const [selectedTime, setSelectedTime] = useState('');
    const [timeOptions, setTimeOptions] = useState([]);

    useEffect(() => {
        const fetchReservation = async () => {
            try {
                setIsLoading(true);
                const response = await axios.get(`http://localhost:8081/api/reservations/${reservationId}`);
                setCheckInTime(response.data.reservationDateTime);
                setFormData(response.data);

                setRestaurantId(response.data.restaurantId);
                const restaurantResponse = await axios.get(`http://localhost:8081/api/restaurants/${response.data.restaurantId}`);
                setRestaurant(restaurantResponse.data);

                setTableNumber(response.data.tableNumber);
                const tableResponse = await axios.get(`http://localhost:8081/api/tables/${response.data.tableNumber}`);
                setTable(tableResponse.data)

                setIsLoading(false);
            } catch (error) {
                console.error('Error fetching reservation:', error);
            }
        };
        fetchReservation();
    }, [reservationId]);

    useEffect(() => {
        const fetchTableReservations = async () => {
            try {
                const response = await axios.get(`http://localhost:8081/api/table-reservations/${table.tableId}`);
                setTableReservations(response.data);
                setIsLoading(false);
            } catch (error) {
                console.error('Error fetching table reservations:', error);
            }
        };

        if (table?.tableId) {
            fetchTableReservations();
        }
    }, [table]);

    useEffect(() => {
        if (table?.restaurant?.operatingHours && selectedDate) {
            const options = generateTimeOptions(table.restaurant.operatingHours);
            setTimeOptions(options);
        }
    }, [table, selectedDate]);


    const handleInputChange = (e) => {
        const { name, value } = e.target;

        if (name === 'partySize') {
            const valueAsNumber = Math.min(value, table?.capacity);
            setFormData(prevState => ({
                ...prevState,
                [name]: valueAsNumber
            }));
        } else {
            setFormData(prevState => ({
                ...prevState,
                [name]: value
            }));
        }
    };


    const handleSubmit = async (e) => {
        e.preventDefault();

        try {
            const token = localStorage.getItem("token");
            if (!token) {
                console.error("No token found");
                return;
            }

            const decodedToken = jwtDecode(token);
            const userId = decodedToken.iss;

            const updatedReservationData = {
                ...formData,
                reservationDateTime: `${selectedDate}T${selectedTime}`,
                checkInTime: checkInTime,
                reservationID: reservationId,
            };
            await axios.post(
                `http://localhost:8081/api/reservations/${reservationId}/${userId}`,
                updatedReservationData,
                {
                    headers: {
                        'Content-Type': 'application/json',
                    }
                }
            );
            console.log(updatedReservationData)

            navigate(`/reservations`);
        } catch (error) {
            console.error('Error updating reservation:', error);
        }
    };

    const formatTimeSlot = (timeSlot) => {
        const date = new Date(timeSlot);
        const formattedDate = date.toLocaleDateString();
        const formattedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        return `${formattedDate} - ${formattedTime}`;
    };

    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const day = String(today.getDate()).padStart(2, '0');
    const formattedDate = `${year}-${month}-${day}`;

    const generateTimeOptions = (operatingHours) => {
        const now = new Date();
        const selectedDateObj = new Date(selectedDate);
        const isToday = selectedDateObj.toDateString() === now.toDateString();

        let options = [];
        for (const hours of operatingHours.split(',')) {
            const [start, end] = hours.trim().split('-');
            const startTime = new Date(selectedDateObj);
            const endTime = new Date(selectedDateObj);
            const [startHour, startMinute] = start.split(':').map(Number);
            const [endHour, endMinute] = end.split(':').map(Number);
            startTime.setHours(startHour, startMinute, 0);
            endTime.setHours(endHour, endMinute, 0);

            if (isToday && startTime < now) {
                startTime.setTime(roundToNext15Minutes(now).getTime());
            }

            if (endTime <= now) {
                setNoAvailableMessage('No available time due to closing.');
                continue;
            }

            while (startTime <= endTime) {
                options.push(startTime.toTimeString().slice(0, 5));
                startTime.setMinutes(startTime.getMinutes() + 15);
            }
        }

        return options.length ? options : ['No available time'];
    };

    const roundToNext15Minutes = (date) => {
        const ms = 1000 * 60 * 15;
        const roundedTime = new Date(Math.ceil(date.getTime() / ms) * ms);

        if (roundedTime.getTime() === date.getTime()) {
            roundedTime.setMinutes(roundedTime.getMinutes() + 15);
        }

        return roundedTime;
    };

    useEffect(() => {
        if (restaurant?.operatingHours && selectedDate) {
            const options = generateTimeOptions(restaurant.operatingHours);
            setTimeOptions(options);
        }
    }, [restaurant, selectedDate]);


    return (
        <div className="container">
            {isLoading ? (
                <p>Loading...</p>
            ) : (
                <>
                    <h1>Edit Reservation</h1>
                    <div className="card-body">
                        <h2 className="card-title">
                            {restaurant?.name}
                            <StarRating key={restaurant?.id} rating={restaurant?.rating || 0}/>
                        </h2>
                        <p className="card-text">Operating Hours: {restaurant?.operatingHours}</p>
                        <p className="card-text">Address: Ul. {restaurant?.address}</p>
                        <br/>
                    </div>
                    <form onSubmit={handleSubmit}>
                        <div className="mb-3">
                            <label>Select Date:</label>
                            <input
                                type="date"
                                className="form-control mt-2"
                                onChange={(event) => setSelectedDate(event.target.value)}
                                value={selectedDate}
                                min={formattedDate}
                            />

                            <label>Select Time:</label>
                            <select
                                className="form-select mt-2"
                                onChange={(event) => setSelectedTime(event.target.value)}
                                value={selectedTime}
                                disabled={!selectedDate}
                            >
                                <option value="">Select Time</option>
                                {timeOptions.map((time, index) => (
                                    <option key={index} value={time}>
                                        {time}
                                    </option>
                                ))}
                            </select>
                            <label className="text-danger">
                                Current check-in time: {formatTimeSlot(checkInTime)}
                            </label>
                        </div>
                        <div className="mb-3">
                            <label htmlFor="partySize" className="form-label">Party Size</label>
                            <input
                                type="number"
                                className="form-control"
                                id="partySize"
                                name="partySize"
                                max={table?.capacity}
                                min={1}
                                value={formData.partySize || ''}
                                onChange={handleInputChange}
                            />
                            <label className="text-danger">
                                Table capacity: {table?.capacity}
                            </label>
                        </div>
                        <div className="mb-3">
                            <label htmlFor="specialRequests" className="form-label">Special Requests</label>
                            <input
                                type="text"
                                className="form-control"
                                id="specialRequests"
                                name="specialRequests"
                                value={formData.specialRequests || ''}
                                onChange={handleInputChange}
                            />
                        </div>
                        <button type="submit" className="btn btn-primary">Submit</button>
                    </form>
                </>
            )}
        </div>
    );
};

export default ReservationEdit;