crazycharge-app/component/bookingMenuPage/makingBookingPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    Pressable,
    StyleSheet,
    Image,
    Dimensions,
    ActivityIndicator,
    Platform,
    Linking,
    Alert
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import NormalButton from '../global/normal_button';
import { CheckMarkLogoSvg, DirectionLogoSvg, PreviousPageBlackSvg } from '../global/SVG';
import { ChargingStationTabView } from '../global/chargingStationTabView';
import ChooseCarForChargingRow from '../global/chooseCarForChargingRow';
import { useEffect, useState } from 'react';
import DropdownSelect from '../global/dropdown_select';
import { chargeStationService } from '../../service/chargeStationService';
import { authenticationService } from '../../service/authService';
import * as Location from 'expo-location';
import { calculateDistance } from '../global/distanceCalculator';

interface AccordionItemProps {
    title: string;
    children: React.ReactNode;
    isOpen: boolean;
    onToggle: () => void;
    isSelected: boolean;
}

const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle, isSelected }) => (
    <View className={`${isSelected ? 'bg-[#e7f5f8]' : 'bg-white'}`}>
        <View className="mx-[5%]">
            <Pressable onPress={onToggle}>
                <Text className={` pt-2 text-lg ${isSelected ? 'text-[#222222]' : 'text-[#888888] '}}`}>{title}</Text>
            </Pressable>
            {isOpen && <View>{children}</View>}
        </View>
    </View>
);

const MakingBookingPageComponent = () => {
    const [openDrawer, setOpenDrawer] = useState<number | null>(0);
    const [selectedTime, setSelectedTime] = useState<string>('');
    const [availableTimeSlots, setAvailableTimeSlots] = useState<string[]>([]);
    const [selectedDrawer, setSelectedDrawer] = useState<number>(0);
    const [isLoading, setIsLoading] = useState(true);
    const [selectedDate, setSelectedDate] = useState<string>('');
    const toggleDrawer = (index: number) => {
        setOpenDrawer(openDrawer === index ? null : index);
        setSelectedDrawer(index);
    };
    const [availableDate, setAvailableDate] = useState<string[]>([]);
    const [car, setCar] = useState([]);
    const [selectedCarID, setSelectedCarID] = useState('');
    const [selectedChargingGun, setSelectedChargingGun] = useState('');
    const [chargingBasedOnWatt, setChargingBasedOnWatt] = useState(false);
    const [stopChargingUponBatteryFull, setStopChargingUponBatteryFull] = useState(false);
    const [selectedCar, setSelectedCar] = useState('');
    const [selectedDuration, setSelectedDuration] = useState('');
    const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
    const [price, setPrice] = useState(0);
    const layoutWidth = screenWidth;
    const layoutHeight = screenHeight * 0.32;
    const [userID, setUserID] = useState('');
    const params = useLocalSearchParams();
    const chargeStationID = params.chargeStationID as string;
    const chargeStationName = params.chargeStationName as string;
    const chargeStationAddress = params.chargeStationAddress as string;
    const chargeStationLat = params.chargeStationLat as string;
    const chargeStationLng = params.chargeStationLng as string;
    const [selectedWatt, setSelectedWatt] = useState('');
    const [availableConnectorDropdownOptions, setAvailableConnectorDropdownOptions] = useState([]);
    const [carCapacitance, setCarCapacitance] = useState('');
    const [currentLocation, setCurrentLocation] = useState<Location.LocationObject | null>(null);
    const [distance, setDistance] = useState<string | null>(null);
    const [upcomingReservations, setUpcomingReservation] = useState([]);
    const [carLoadingState, setCarLoadingState] = useState(false);
    const [isDateLoading, setIsDateLoading] = useState(true);

    useEffect(() => {
        const getCurrentLocation = async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                console.error('Permission to access location was denied');
                return;
            }
            let location = await Location.getLastKnownPositionAsync({});
            setCurrentLocation(location);
        };

        getCurrentLocation();
    }, []);
    const formatDistance = (distanceInMeters: number): string => {
        if (distanceInMeters < 1000) {
            return `${Math.round(distanceInMeters)}米`;
        } else {
            const distanceInKm = distanceInMeters / 1000;
            return `${distanceInKm.toFixed(1)}公里`;
        }
    };
    const getUpcomingReservations = (reservations, daysAhead = 3) => {
        const today = new Date();
        const threeDaysLater = new Date(today);
        threeDaysLater.setDate(today.getDate() + daysAhead);

        return reservations
            .filter((reservation) => {
                const reservationDate = new Date(reservation.book_time);
                return reservationDate >= today && reservationDate <= threeDaysLater;
            })
            .sort((a, b) => new Date(a.reservationDate) - new Date(b.reservationDate));
    };

    //USE BELOW to find  upcoming reservations, then I filter availableDate and time based on the upcoming ones so user cannot book the same time twice.
    const formatReservations = (reservations) => {
        const formattedReservations = {};

        reservations.forEach((reservation) => {
            const bookTime = new Date(reservation.book_time);
            const date = formatDate(bookTime);
            const time = formatTime(bookTime);

            if (!formattedReservations[date]) {
                formattedReservations[date] = [];
            }
            formattedReservations[date].push(time);
        });

        return Object.entries(formattedReservations).map(([date, times]) => ({
            date,
            times
        }));
    };

    const formatDate = (date) => {
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${month}/${day}`;
    };

    const formatTime = (date) => {
        return date.toTimeString().slice(0, 5);
    };
    useEffect(() => {
        const fetchReservationHistories = async () => {
            try {
                const response = await chargeStationService.fetchReservationHistories();
                if (response) {
                    // console.log('response', response);
                    // console.log('Reservation histories:', response);
                    const upcomingReservations = getUpcomingReservations(response);
                    // console.log('upcomingReservations', upcomingReservations);
                    const formattedReservations = formatReservations(upcomingReservations);
                    // console.log('formattedReservations', formattedReservations);
                    setUpcomingReservation(formattedReservations);
                }
                2;
            } catch (error) {
                console.log(error);
            }
        };
        fetchReservationHistories();
    }, []);
    //USE ABOVE to find upcoming reservations, then I filter availableDate and time based on the upcoming ones so user cannot book the same time twice.

    useEffect(() => {
        const getDistance = async () => {
            if (currentLocation) {
                try {
                    const distance = await calculateDistance(
                        Number(params.chargeStationLat),
                        Number(params.chargeStationLng),
                        currentLocation
                    );
                    setDistance(formatDistance(distance));
                } catch (error) {
                    console.error('Error calculating distance:', error);
                }
            }
        };

        getDistance();
    }, [params.chargeStationLat, params.chargeStationLng, currentLocation]);

    useEffect(() => {
        const fetchChargeStation = async () => {
            try {
                const data = await chargeStationService.fetchPriceForCharging();
                setPrice(data.data[0].price);
                // console.log(JSON.stringify(fetchedChargeStation.data));
            } catch (error) {
                console.log(error);
            }
        };
        fetchChargeStation();
    }, []);

    function appendImageUrlToCarResult(carData, updatedVehicles) {
        return carData.map((car) => {
            const matchingVehicle = updatedVehicles.find((vehicle) => vehicle.car_type.name === car.car_name);
            if (matchingVehicle) {
                return {
                    ...car,
                    type_image_url: matchingVehicle.car_type.type_image_url
                };
            }
            return car;
        });
    }

    useEffect(() => {
        setCarLoadingState(true);
        const fetchUserInfoAndCarData = async () => {
            try {
                const fetchedUserInfo = await authenticationService.getUserInfo();
                const userData = fetchedUserInfo?.data;
                // console.log('userData', userData);
                if (userData) {
                    setUserID(userData.id);

                    const carData = userData.cars.map((car: any) => ({
                        car_name: car.name,
                        car_capacitance: car.capacitance,
                        car_id: car.id,
                        isDefault: car.id === userData.defaultCar?.id
                    }));
                    // console.log('carDarta', carData);
                    setCar(carData);

                    const carResult = await chargeStationService.getUserCars();
                    let updatedVehicles = [...carResult.data];
                    // console.log('updatedVehiaacles', updatedVehicles);

                    const updatedCarResult = appendImageUrlToCarResult(carData, updatedVehicles);
                    setCar(updatedCarResult);

                    let updatedCarResultWithProcessedUrl = [...updatedCarResult];

                    for (let i = 0; i < updatedCarResultWithProcessedUrl.length; i++) {
                        const car = updatedCarResultWithProcessedUrl[i];
                        const processedUrl = await chargeStationService.getProcessedImageUrl(car.type_image_url);
                        updatedCarResultWithProcessedUrl[i] = {
                            ...car,
                            processedImageUrl: processedUrl
                        };
                    }
                    // console.log(updatedCarResultWithProcessedUrl);
                    setCar(updatedCarResultWithProcessedUrl);
                }
            } catch (error) {
                console.error('Error fetching user info:', error);
            } finally {
                setCarLoadingState(false);
            }
        };
        fetchUserInfoAndCarData();
    }, []);

    useEffect(() => {
        const fetchingAvailableTimeSlots = async () => {
            setIsLoading(true);
            try {
                const fetchedTimeSlots = await chargeStationService.fetchAvailableTimeSlots(
                    chargeStationID,
                    selectedDate
                );
                const now = new Date();
                const today = `${String(now.getMonth() + 1).padStart(2, '0')}/${String(now.getDate()).padStart(
                    2,
                    '0'
                )}`;

                let filteredTimeSlots = fetchedTimeSlots;

                //filter out today's time slots that have already passed
                if (selectedDate === today) {
                    const currentHours = now.getHours();
                    const currentMinutes = now.getMinutes();

                    filteredTimeSlots = fetchedTimeSlots.filter((time) => {
                        const [hours, minutes] = time.split(':').map(Number);
                        if (hours > currentHours) return true;
                        if (hours === currentHours && minutes > currentMinutes) return true;
                        return false;
                    });
                }
                //filter out time slots that are already fully booked
                const reservedSlotsForDate = upcomingReservations.find((res) => res.date === selectedDate);

                if (reservedSlotsForDate) {
                    filteredTimeSlots = filteredTimeSlots.filter((time) => !reservedSlotsForDate.times.includes(time));
                }
                setAvailableTimeSlots(filteredTimeSlots);
            } catch (error) {
                console.error('Error fetching time slots:', error);
            } finally {
                setIsLoading(false);
            }
        };

        if (selectedDate) {
            fetchingAvailableTimeSlots();
        }
    }, [selectedDate]);

    useEffect(() => {
        const fetchConnectorOptions = async () => {
            try {
                const fetchedData = await chargeStationService.fetchSpecificChargeStation(chargeStationID);
                console.log('fetchedDate', fetchedData);
                const dateObject = fetchedData.find((item) => item.date === selectedDate);
                console.log('dateObject', dateObject);
                if (!dateObject) {
                    setAvailableConnectorDropdownOptions([]);
                    return;
                }

                const rangeObject = dateObject.range.find((range) => range.start === selectedTime);
                console.log('rangeObject', rangeObject);
                if (!rangeObject) {
                    setAvailableConnectorDropdownOptions([]);
                    return;
                }

                const connectorIDs = rangeObject.connectors
                    .filter((connector) => connector.Status === 2)
                    .map((connector) => connector.ConnectorID);

                console.log('connectorIDs', connectorIDs);

                setAvailableConnectorDropdownOptions(connectorIDs);
            } catch (error) {
                console.error('Error fetching charge station data:', error);
                setAvailableConnectorDropdownOptions([]);
            }
        };

        fetchConnectorOptions();
    }, [chargeStationID, selectedDate, selectedTime]);

    const formattedConnectorDropdownOptions = availableConnectorDropdownOptions.map((id, index) => ({
        label: (index + 1).toString(),
        value: id
    }));

    useEffect(() => {
        const fetchingAvailableDates = async () => {
            setIsDateLoading(true);
            try {
                const fetchedDates = await chargeStationService.fetchAvailableDates(chargeStationID);
                console.log('fetchedDates', fetchedDates);
                setAvailableDate(fetchedDates);

                console.log(fetchedDates.slice(0, 3));
            } catch (error) {
                console.error('Error fetching available dates:', error);
            } finally {
                setIsDateLoading(false);
            }
        };

        fetchingAvailableDates();
    }, [chargeStationID]);

    const handleNavigationPress = () => {
        const latitude = chargeStationLat;
        const longitude = chargeStationLng;
        // console.log('latitude', latitude);
        // console.log('longitude', longitude);
        const label = encodeURIComponent(chargeStationName);

        // Google Maps App URL
        const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;

        // Fallback URL for web browser
        const webUrl = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;

        Linking.canOpenURL(googleMapsUrl)
            .then((supported) => {
                if (supported) {
                    Linking.openURL(googleMapsUrl);
                } else {
                    Linking.openURL(webUrl).catch((err) => {
                        console.error('An error occurred', err);
                        Alert.alert(
                            'Error',
                            "Unable to open Google Maps. Please make sure it's installed on your device.",
                            [{ text: 'OK' }],
                            { cancelable: false }
                        );
                    });
                }
            })
            .catch((err) => console.error('An error occurred', err));
    };

    return (
        <SafeAreaView
            style={{
                flex: 1,
                backgroundColor: 'white'
            }}
            edges={['right', 'top', 'left']}
        >
            <ScrollView className="flex-1 bg-white" showsVerticalScrollIndicator={false}>
                <View className="pb-4 ">
                    <View className="ml-[5%] pt-8">
                        <Pressable
                            style={{ alignSelf: 'flex-start' }}
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('./');
                                }
                            }}
                        >
                            <PreviousPageBlackSvg />
                        </Pressable>
                        <Text className="text-3xl mt-8">{chargeStationName}</Text>
                        <View className="flex-column">
                            <View className="flex-row justify-between items-center mr-[5%]">
                                <Text className="text-base" style={styles.grayColor}>
                                    {chargeStationAddress}
                                </Text>
                                <NormalButton
                                    title={
                                        <View className="flex-row items-center justify-center text-center space-x-1">
                                            <DirectionLogoSvg />
                                            <Text className="text-base">路線</Text>
                                        </View>
                                    }
                                    // onPress={() => console.log('路線')}
                                    onPress={handleNavigationPress}
                                    extendedStyle={{
                                        backgroundColor: '#E3F2F8',
                                        borderRadius: 61,
                                        paddingHorizontal: 20,
                                        paddingVertical: 8
                                    }}
                                />
                            </View>
                            <View className="flex-row space-x-2 items-center">
                                <CheckMarkLogoSvg />
                                <Text>Walk-In</Text>
                                {/* <Text>{distance}</Text> */}
                            </View>
                        </View>
                    </View>
                </View>
                <View>
                    {selectedCar !== '' ? (
                        <>
                            <Pressable
                                onPress={() => {
                                    setSelectedCar('');
                                    setSelectedWatt('');
                                    setOpenDrawer(0);
                                    setSelectedDrawer(0);
                                    setSelectedDuration('');
                                    setChargingBasedOnWatt(false);
                                    setStopChargingUponBatteryFull(false);
                                    setSelectedDate('');
                                    setSelectedTime('');
                                }}
                            >
                                <View className="mx-[5%]">
                                    <View className="flex-row items-center pt-4">
                                        <Text className="text-lg pr-2 text-[#34667c]">選擇充電車輛</Text>
                                        <CheckMarkLogoSvg />
                                    </View>
                                    <Text className="text-lg pb-4">{selectedCar}</Text>
                                </View>
                            </Pressable>
                        </>
                    ) : (
                        <AccordionItem
                            title="選擇充電車輛"
                            isOpen={openDrawer === 0}
                            onToggle={() => toggleDrawer(0)}
                            isSelected={selectedDrawer === 0}
                        >
                            {carLoadingState ? (
                                <View>
                                    <ActivityIndicator color="#34657b" />
                                </View>
                            ) : (
                                <ScrollView
                                    horizontal={true}
                                    contentContainerStyle={{
                                        alignItems: 'center',
                                        flexDirection: 'row',
                                        marginVertical: 8
                                    }}
                                    className="space-x-2 "
                                >
                                    {car
                                        .sort((a, b) => (b.isDefault ? 1 : 0) - (a.isDefault ? 1 : 0))
                                        .map((car, index) => (
                                            <ChooseCarForChargingRow
                                                onPress={() => {
                                                    setSelectedCar(car.car_name);
                                                    setSelectedCarID(car.car_id);
                                                    setCarCapacitance(car.car_capacitance);
                                                    setSelectedDrawer(1);
                                                    setOpenDrawer(1);
                                                }}
                                                image={car.processedImageUrl}
                                                key={`${car.car_name}+${index}`}
                                                VehicleName={car.car_name}
                                                isDefault={car.isDefault}
                                            />
                                        ))}
                                </ScrollView>
                            )}
                        </AccordionItem>
                    )}

                    {stopChargingUponBatteryFull === true || selectedWatt !== '' ? (
                        <Pressable
                            onPress={() => {
                                setSelectedDuration('');
                                setChargingBasedOnWatt(false);
                                setStopChargingUponBatteryFull(false);
                                setSelectedTime('');
                                setSelectedDate('');
                                setSelectedWatt('');
                                setOpenDrawer(1);
                                setSelectedDrawer(1);
                            }}
                        >
                            <View className="mx-[5%] ">
                                <View className="flex-row items-center pt-4">
                                    <Text className="text-lg pr-2 text-[#34667c]">選擇充電方案</Text>
                                    <CheckMarkLogoSvg />
                                </View>
                                <Text className="text-lg pb-4">
                                    {selectedWatt !== '' ? `按每道電 - ${selectedWatt.split('~')[0]}` : '充滿停機'}
                                </Text>
                            </View>
                        </Pressable>
                    ) : (
                        <AccordionItem
                            title="選擇充電方案"
                            isOpen={openDrawer === 1}
                            onToggle={() => {}}
                            isSelected={selectedDrawer === 1}
                        >
                            <View className="flex-row justify-between mt-2 mb-3">
                                <Pressable
                                    className={`border rounded-lg border-[#34667c] w-[47%] items-center bg-white ${
                                        chargingBasedOnWatt ? 'bg-[#34667c] ' : ''
                                    }`}
                                    onPress={() => {
                                        setChargingBasedOnWatt(!chargingBasedOnWatt);
                                        setStopChargingUponBatteryFull(false);
                                    }}
                                >
                                    <Text
                                        className={`text-base p-2 text-[#34667c] ${
                                            chargingBasedOnWatt ? ' text-white' : 'text-[#34667c]'
                                        }`}
                                    >
                                        按每度電
                                    </Text>
                                </Pressable>
                                <Pressable
                                    onPress={() => {
                                        setStopChargingUponBatteryFull(!stopChargingUponBatteryFull);
                                        setChargingBasedOnWatt(false);
                                        setSelectedDrawer(2);
                                        setOpenDrawer(2);
                                    }}
                                    className={`border rounded-lg border-[#34667c] w-[47%] items-center bg-white ${
                                        stopChargingUponBatteryFull ? ' bg-[#34667c]' : ''
                                    }`}
                                >
                                    <Text
                                        className={`text-base p-2 text-[#34667c] ${
                                            stopChargingUponBatteryFull ? ' text-white' : 'text-[#34667c]'
                                        }`}
                                    >
                                        充滿停機
                                    </Text>
                                </Pressable>
                            </View>

                            {chargingBasedOnWatt === true && (
                                <View className="flex-row w-full justify-between mb-3">
                                    {['20 kWh~25mins', '25 kWh~30mins', '30 kWh~40mins', '40 kWh~45mins'].map(
                                        (watt) => (
                                            <Pressable
                                                key={watt}
                                                className={`${
                                                    selectedWatt === watt ? 'bg-[#34667c] ' : 'bg-white'
                                                } border border-[#34667c]  rounded-lg w-[22%] items-center`}
                                                onPress={() => {
                                                    setSelectedWatt(watt);
                                                    setOpenDrawer(2);
                                                    setSelectedDrawer(2);
                                                }}
                                            >
                                                <Text
                                                    className={`text-base pt-2 pl-2 pr-2 ${
                                                        selectedWatt === watt ? 'text-white' : 'text-[#34667c]'
                                                    } `}
                                                >
                                                    {watt.split('~')[0]}
                                                </Text>
                                                <Text className="text-xs pt-0 pb-1 text-[#666666]">
                                                    {watt.split('~')[1]}
                                                </Text>
                                            </Pressable>
                                        )
                                    )}
                                </View>
                            )}
                        </AccordionItem>
                    )}
                    {selectedTime !== '' ? (
                        <Pressable
                            onPress={() => {
                                setOpenDrawer(2);
                                setSelectedDrawer(2);
                                setSelectedDate('');
                                setSelectedTime('');
                            }}
                        >
                            <View className="mx-[5%] ">
                                <View className="flex-row items-center pt-4">
                                    <Text className="text-lg pr-2 text-[#34667c]">選擇日期</Text>
                                    <CheckMarkLogoSvg />
                                </View>
                                <Text className="text-lg pb-4">
                                    {selectedDate} - {selectedTime}
                                </Text>
                            </View>
                        </Pressable>
                    ) : (
                        <AccordionItem
                            title="選擇日期 (月/日)"
                            isOpen={openDrawer === 2}
                            onToggle={() => {
                                if (stopChargingUponBatteryFull !== false || selectedDuration !== '') {
                                    toggleDrawer(2);
                                }
                            }}
                            isSelected={selectedDrawer === 2}
                        >
                            {isDateLoading ? (
                                <View className="flex-1 items-center justify-center py-4">
                                    <ActivityIndicator size="large" color="#34667c" />
                                </View>
                            ) : (
                                <View className="flex-row w-full flex-wrap mb-1 ">
                                    {availableDate.slice(0, 3).map((date) => (
                                        <Pressable
                                            key={date}
                                            className={`${
                                                selectedDate === date ? 'bg-[#34667c] ' : 'bg-white'
                                            } border border-[#34667c]  rounded-lg w-[22%] items-center mt-1 mr-1 mb-1`}
                                            onPress={() => {
                                                setSelectedDate(date);
                                            }}
                                        >
                                            <Text
                                                className={`text-base p-2  ${
                                                    selectedDate === date ? 'text-white' : 'text-[#34667c]'
                                                } `}
                                            >
                                                {date}
                                            </Text>
                                        </Pressable>
                                    ))}
                                </View>
                            )}
                            {selectedDate !== '' && (
                                <>
                                    <Text className="text-lg pr-2 ">選擇時間</Text>
                                    {isLoading ? (
                                        <View className="flex-1 mb-2">
                                            <ActivityIndicator />
                                        </View>
                                    ) : (
                                        <View className="flex-row w-full mb-3 flex-wrap my-2 ">
                                            {availableTimeSlots.map((time) => (
                                                <Pressable
                                                    key={time}
                                                    className={`${
                                                        selectedTime === time ? 'bg-[#34667c] ' : 'bg-white'
                                                    } border border-[#34667c]  mr-2 rounded-lg w-[22%] items-center mb-2`}
                                                    onPress={() => {
                                                        setSelectedTime(time);
                                                        setOpenDrawer(3);
                                                        setSelectedDrawer(3);
                                                    }}
                                                >
                                                    <Text
                                                        className={`text-base p-2  ${
                                                            selectedTime === time ? 'text-white' : 'text-[#34667c]'
                                                        } `}
                                                    >
                                                        {time}
                                                    </Text>
                                                </Pressable>
                                            ))}
                                        </View>
                                    )}
                                </>
                            )}
                        </AccordionItem>
                    )}
                    <View className="">
                        <AccordionItem
                            title="選擇充電座"
                            isOpen={openDrawer === 3}
                            onToggle={() => {
                                if (selectedTime) {
                                    // toggleDrawer(3);
                                }
                            }}
                            isSelected={selectedDrawer === 3}
                        >
                            <View className="">
                                <DropdownSelect
                                    dropdownOptions={formattedConnectorDropdownOptions}
                                    placeholder={'選擇充電座號碼'}
                                    onSelect={(value) => {
                                        setSelectedChargingGun(value);
                                        router.push({
                                            pathname: '/bookingConfirmationPage',
                                            params: {
                                                chargeStationName,
                                                chargeStationAddress,
                                                chargeStationID,
                                                connectorID: value,
                                                userID,
                                                carCapacitance: carCapacitance,
                                                carID: selectedCarID,
                                                carName: selectedCar,
                                                date: selectedDate,
                                                bookTime: selectedTime,
                                                chargingMethod: stopChargingUponBatteryFull
                                                    ? 'stopChargingUponBatteryFull'
                                                    : 'chargingBasedOnWatt',
                                                chargingWatt: selectedWatt || '',
                                                price: price
                                            }
                                        });
                                    }}
                                    extendedStyle={{
                                        borderColor: '#34667c',
                                        marginTop: 4
                                    }}
                                />

                                <Image
                                    style={{
                                        width: layoutWidth * 0.9,
                                        height: layoutHeight
                                    }}
                                    resizeMode="contain"
                                    source={require('../../assets/floorPlan1.png')}
                                />
                            </View>
                        </AccordionItem>
                    </View>
                </View>

                <View className="mx-[5%] flex-1">
                    <View className="flex-row border-slate-300 mt-3 mb-6 rounded-2xl flex-1" style={{ borderWidth: 1 }}>
                        <View className="flex-1 m-4">
                            <View className="flex-1 flex-row ">
                                <View className=" flex-1 flex-column  justify-between">
                                    <Text className="text-xl " style={styles.text}>
                                        收費
                                    </Text>

                                    <View className="flex-row items-center space-x-2">
                                        <Text className="text-3xl text-[#02677D]">$20</Text>
                                        <Text style={styles.text}>每15分鐘</Text>
                                    </View>
                                </View>
                                <View className="items-center justify-center">
                                    <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
                                </View>
                                <View className="flex-1 flex-column ">
                                    <View className="flex-1"></View>
                                    <View className="flex-row items-center ml-4 space-x-2 ">
                                        <Text className="text-3xl text-[#02677D]">${price}</Text>
                                        <Text style={styles.text}>每度電</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>

                    <Text className="text-xl pb-2 " style={styles.text}>
                        充電站資訊
                    </Text>
                    <View className="h-[250px]">
                        <ChargingStationTabView titles={['充電插頭', '其他']} />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
export default MakingBookingPageComponent;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    topLeftTriangle: {
        width: 0,
        height: 0,
        borderLeftWidth: 50,
        borderBottomWidth: 50,
        borderLeftColor: '#02677D',
        borderBottomColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});