TripPlanner.tsx

// Worked on by Yoel and Nishil
import React, {useState} from "react";
import {
    Flex,
    ComboBox,
    Item,
    View,
    Button,
    useAsyncList,
    ListBox,
    Text,
    Content,
    Heading,
    Divider, DatePicker
} from '@adobe/react-spectrum';
import {wait} from "@testing-library/user-event/dist/utils";
import moment from 'moment-timezone';
import { CalendarDateTime } from '@internationalized/date';
import {Moment} from "moment";

interface Place {
    type: string,
    name: string,
    id: string,
    lat: number,
    lon: number;
}

interface Trip {
    id: string;
    duration: number; // Duration in seconds
    startTime: string; // ISO timestamp of start time
    endTime: string; // ISO timestamp of end time
    transfers: number; // Number of transfers
    legs: Leg[]; // List of legs

}

interface Leg {
    mode: string; // e.g., "BUS", "TRAIN", "WALK"
    from: Place; // Starting location details
    to: Place; // Destination location details
    duration: number; // Duration in seconds
    startTime: string; // ISO timestamp of start time
    endTime: string; // ISO timestamp of end time
    distance: number; // Distance in meters (optional if unknown)
    headsign: string; // Vehicle headsign
    tripId: string; // Unique ID for the trip
    routeShortName: string; // Short name for the route (e.g., "Bus 232")
    routeColor: string; // Color of the route, in hex
    routeTextColor: string; // Text color for route, in hex
    intermediateStops: Place[]; // List of intermediate stops
}


const usePlaceSuggestions = () => {
    return useAsyncList<Place>({
        async load({signal, filterText}) {
            if (!filterText) return {items: []}; // Return empty if no input
            let response: Response = await fetch(`http://motis.metroll.live/api/v1/geocode?text=${filterText}`, {signal});
            let data = await response.json();
            let places = data.map((pl: Place) => ({
                type: pl.type,
                name: pl.name,
                id: pl.id || null, // If no id, set to null
                lat: pl.lat,
                lon: pl.lon,
            }));
            return {items: places.slice(0, 5)};
        }
    });
};

const formatDuration = (seconds: number): string => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    let formattedDuration = "";

    if (hours > 0) {
        formattedDuration += `${hours} hour${hours > 1 ? 's' : ''}`;
    }

    if (minutes > 0) {
        if (hours > 0) formattedDuration += " ";
        formattedDuration += `${minutes} minute${minutes > 1 ? 's' : ''}`;
    }

    return formattedDuration || "0 minutes";
};




const TripPlanner: React.FC = () => {
    const [fromPlace, setFromPlace] = useState<Place | null>(null);
    const [toPlace, setToPlace] = useState<Place | null>(null);
    const [trips, setTrips] = useState<Trip[]>([]);
    const [showTrips, setShowTrips] = useState(false);
    const [tripDetails, setTripDetails] = useState<Trip | null>(null);
    const [showTripDetails, setShowTripDetails] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [isLoading, setIsLoading] = React.useState(false);
    const currentDate = new Date();
    const [selectedDate, setSelectedDate] = useState(
        new CalendarDateTime(
            currentDate.getFullYear(), // Year
            currentDate.getMonth() + 1, // Month (1-indexed)
            currentDate.getDate(),      // Day
            currentDate.getHours(),     // Hour
            currentDate.getMinutes(),   // Minute
            currentDate.getSeconds()    // Second
        )
    );



    const fromPlaceSuggestions = usePlaceSuggestions();
    const toPlaceSuggestions = usePlaceSuggestions();


    const formattedTime = moment(selectedDate.toString()).toISOString();

    // Get the current time and subtract 1 minute to allow a small buffer
    const currentTime = moment().subtract(30, 'minute'); // Allow 1 minute buffer
    const selectedMoment = moment(formattedTime); // The time selected by the user


    const customStartDate = moment("2024-11-18");
    const customEndDate = moment("2025-1-5");

    const isValidCustomDate = (date: string | Moment): boolean => {
        const momentDate = moment(date);
        return momentDate.isValid() && momentDate.isBetween(customStartDate, customEndDate, null, '[]');
    };


    const convertToCalendarDateTime = (date: Date): CalendarDateTime => {
        return new CalendarDateTime(
            date.getFullYear(),         // Year
            date.getMonth() + 1,        // Month (1-based index)
            date.getDate(),             // Day
            date.getHours(),            // Hour
            date.getMinutes(),          // Minute
            date.getSeconds(),          // Second
            date.getMilliseconds()      // Millisecond
        );
    };


    const handleDateChange = (newDate: CalendarDateTime | null) => {
        if (newDate) {
            setSelectedDate(newDate); // Directly set the CalendarDateTime object
        } else {
            setSelectedDate(convertToCalendarDateTime(new Date())); // Fallback to the current date
        }
    };

    const HandlePlanTripButton = async () => {
        console.log("Button clicked");

        // Log values for debugging
        console.log("selectedMoment:", selectedMoment);
        console.log("fromPlace:", fromPlace);
        console.log("toPlace:", toPlace);

        // Handle case when selectedMoment is null or invalid (empty field)
        if (!selectedMoment || !selectedMoment.isValid()) {
            setError('Error: Please select a valid date.');
            setShowTripDetails(false); // Hide trip details when error occurs
            return; // Early return if selectedMoment is invalid
        }

        // Handle case when fromPlace or toPlace is empty
        if (!fromPlace && !toPlace) {
            setError("Error: Please enter both origin and destination.");
            setShowTripDetails(false); // Hide trip details when error occurs
        } else if (!fromPlace) {
            setError("Error: Please enter an origin.");
            setShowTripDetails(false); // Hide trip details when error occurs
        } else if (!toPlace) {
            setError("Error: Please enter a destination.");
            setShowTripDetails(false); // Hide trip details when error occurs
        } else if (selectedMoment.isBefore(currentTime)) {
            setError('Error: Selected time is in the past. Please choose a future time.');
            setShowTripDetails(false); // Hide trip details when error occurs
        } else if (!isValidCustomDate(selectedMoment)) {
            setError('Error: Selected date is too far away. Please choose a closer time.');
            setShowTripDetails(false); // Hide trip details when error occurs
        } else {
            // If everything is valid, proceed with the logic
            if (fromPlace.id === toPlace.id) {
                setError("Origin and destination cannot be the same.");
                setShowTripDetails(false); // Hide trip details when error occurs
            } else {
                setIsLoading(true);
                await wait(1000);
                const result = await getTripSuggestions(fromPlace, toPlace);

                if (result.items.length === 0) {
                    setError("No trips found. Please check if the two stops exist.");
                    setShowTripDetails(false); // Hide trip details when error occurs
                } else {
                    setError(null); // Clear any previous errors
                    setTrips(result.items);
                }
            }
        }

        setIsLoading(false);
        setShowTrips(true);
    };




    const getTripSuggestions = async (fromPlace: Place, toPlace: Place)=> {
        if (!fromPlace || !toPlace) return { items: [] };

        let fromPlaceId = fromPlace.id;
        let toPlaceId = toPlace.id;
        if (fromPlace.type === "PLACE" || fromPlace.type === "ADDRESS")
            fromPlaceId = `${fromPlace.lat},${fromPlace.lon}`;
        if (toPlace.type === "PLACE" || toPlace.type === "ADDRESS")
            toPlaceId = `${toPlace.lat},${toPlace.lon}`;
        const response = await fetch(`http://motis.metroll.live/api/v1/plan?time=${formattedTime}&fromPlace=${fromPlaceId}&toPlace=${toPlaceId}&arriveBy=false`);
        const data = await response.json();
        let trips = data.itineraries.map((trip: Trip) => ({
            ...trip,
            id: `${trip.startTime}-${trip.endTime}-${trip.transfers}`,
            legs: trip.legs.map((leg: Leg) => ({
                ...leg,
                routeShortName: leg.mode === "WALK" ? "Walk" : leg.routeShortName
            }))

        }));
        return {items: trips.slice(0, 5)};
    };

    const formattedDate = moment(selectedDate.toString()).format('MM/DD/YYYY');




    return (
        <Flex direction="row" gap="size-200" justifyContent="center">
            <Flex direction="column" justifyContent="space-between" gap="size-200" marginBottom="size-300">
                <View backgroundColor="gray-100" padding="size-300" marginX="auto" borderRadius="medium" marginTop="size-600">
                    <Heading level={3}>Trip Planner</Heading>
                    <Divider marginBottom="size-200"/>
                    <Flex gap="size-100" direction="column" width="size-6000">
                        {/* Start Location ComboBox */}
                        <ComboBox
                            label="Origin"
                            placeholder="Enter a stop as Origin"
                            items={fromPlaceSuggestions.items}
                            inputValue={fromPlaceSuggestions.filterText}
                            onInputChange={fromPlaceSuggestions.setFilterText}
                            onSelectionChange={(key) => {
                                const selectedItem = fromPlaceSuggestions.items.find(item => item.id === key);
                                setFromPlace(selectedItem || null);
                            }}
                            loadingState={fromPlaceSuggestions.loadingState}
                            direction="bottom"
                            shouldFlip={true}
                            menuTrigger="input"
                            width="100%"
                        >
                            {(item) => <Item key={item.id}>{item.name}</Item>}
                        </ComboBox>
                        {/* End Location ComboBox */}
                        <ComboBox
                            label="Destination"
                            placeholder="Enter a stop as Destination"
                            items={toPlaceSuggestions.items}
                            inputValue={toPlaceSuggestions.filterText}
                            onInputChange={toPlaceSuggestions.setFilterText}
                            onSelectionChange={(key) => {
                                const selectedItem = toPlaceSuggestions.items.find(item => item.id === key);
                                setToPlace(selectedItem || null);
                            }}
                            loadingState={toPlaceSuggestions.loadingState}
                            direction="bottom"
                            shouldFlip={true}
                            menuTrigger="input"
                            width="100%"
                        >
                            {(item) => <Item key={item.id}>{item.name}</Item>}
                        </ComboBox>

                        <DatePicker
                            label="Select a Date"
                            value={selectedDate}
                            onChange={handleDateChange}  // Update the state when a date is selected
                            width="100%"
                            marginTop="size-200"
                        />

                        {/* Plan Trip Button */}
                        <Button variant="accent" isPending={isLoading} onPress={HandlePlanTripButton}>
                            Plan Trip
                        </Button>
                    </Flex>
                </View>

                {/* Display Trip Suggestions */}
                {showTrips && (
                    <View backgroundColor="gray-100" padding="size-300" width="size-6000" marginX="auto"
                          borderRadius="medium">
                        {error ? (
                            <Text UNSAFE_style={{color: 'red'}}>{error}</Text>
                        ) : (
                            <ListBox aria-label="Trip Suggestions" items={trips} selectionMode="single"
                                     onSelectionChange={(key) => {
                                         let selectedKey = Array.from(key)[0];
                                         const selectedTrip = trips.find(trip => trip.id === selectedKey);
                                         setTripDetails(selectedTrip || null);
                                         setShowTripDetails(true);
                                     }}>
                                {(item) => (
                                    <Item key={item.id}>
                                        <Text justifySelf="start"> {item.legs.map(leg => leg.routeShortName).join(' • ')}</Text>
                                        <Text justifySelf="end">{item.duration / 60} min </Text>
                                    </Item>
                                )}
                            </ListBox>
                        )}
                    </View>
                )}
            </Flex>

            <Flex direction="column" justifyContent="center" marginTop="size-300">
                {/* Display Trip Details */}
                {showTripDetails && (
                    <View backgroundColor="gray-100" padding="size-300" borderRadius="medium" width="size-6000"
                          marginTop="size-300" maxHeight="size-8000" overflow="auto">
                        <Content>
                            <Heading level={4}>{fromPlace?.name} - {toPlace?.name}</Heading>
                            <Text><strong>Duration:</strong> {formatDuration(Number(tripDetails?.duration))}</Text>
                            <br/>
                            <strong>Date:</strong> {formattedDate} {/* Display the selected date */}
                            <Divider marginY="size-150"/>
                            {tripDetails?.legs.map((leg: Leg, legIndex: number) => (
                                <View marginBottom="size-200">
                                    <Text>
                                        <strong>{tripDetails.legs.length > 1 && (legIndex === 0 ? "START: " : legIndex === tripDetails.legs.length - 1 ? " END: " : "")}{leg.routeShortName}</strong>
                                        <br/>{new Date(leg.startTime).toLocaleTimeString([], {
                                        hour: '2-digit',
                                        minute: '2-digit'
                                    })} to {new Date(leg.endTime).toLocaleTimeString([], {
                                        hour: '2-digit',
                                        minute: '2-digit'
                                    })}
                                        <br/>{leg.from.name} to {leg.to.name}
                                    </Text>
                                    <Divider size="S" marginTop="size-150"/>
                                </View>
                            ))}
                        </Content>
                    </View>
                )}
            </Flex>
        </Flex>



    );
};

export default TripPlanner;