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';
import Modal from 'react-native-modal';
import useUserInfoStore from '../../providers/userinfo_store';
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 [isModalVisible, setModalVisible] = useState(false);
    const [routerParams, setRouterParams] = useState(null);
    const [openDrawer, setOpenDrawer] = useState<number | null>(1);
    const [selectedTime, setSelectedTime] = useState<string>('');
    const [availableTimeSlots, setAvailableTimeSlots] = useState<string[]>([]);
    const [selectedDrawer, setSelectedDrawer] = useState<number>(1);
    const [isLoading, setIsLoading] = useState(true);
    const [selectedDate, setSelectedDate] = useState<string>('');
    const toggleDrawer = (index: number) => {
        setOpenDrawer(openDrawer === index ? null : index);
        setSelectedDrawer(index);
    };
    const [defaultCar, setDefaultCar] = useState(null);
    const [isDefaultCarLoading, setIsDefaultCarLoading] = useState(true);

    const [availableDate, setAvailableDate] = useState<string[]>([]);
    const [car, setCar] = useState([]);
    const [selectedCarID, setSelectedCarID] = useState('');
    const [selectedChargingGun, setSelectedChargingGun] = useState('');
    const [chargingBasedOnWatt, setChargingBasedOnWatt] = useState(true);
    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 } = useUserInfoStore();

    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();
    }, []);

    //getDefaultCar
    useEffect(() => {
        const fetchDefaultCar = async () => {
            setIsDefaultCarLoading(true);
            try {
                const response = await chargeStationService.getUserDefaultCars();
                if (response && response.data) {
                    setDefaultCar(response.data.id);
                    setSelectedCarID(response.data.id);
                    setCarCapacitance(response.data.car_type.capacitance);
                    setSelectedCar(response.data.id);
                    console.log('*******', response.data.car_type.capacitance);
                }
            } catch (error) {
                console.log('Error fetching default car:', error);
            } finally {
                setIsDefaultCarLoading(false);
            }
        };
        fetchDefaultCar();
    }, []);
    const formatDistance = (distanceInMeters: number): string => {
        if (distanceInMeters < 1000) {
            return `${Math.round(distanceInMeters)}米`;
        } else {
            const distanceInKm = distanceInMeters / 1000;
            return `${distanceInKm.toFixed(1)}公里`;
        }
    };
    const getUpcomingReservations = (reservations: any, 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 fetchPrice = async () => {
            try {
                const price = await chargeStationService.fetchChargeStationPrice(chargeStationID);
                setPrice(price);
            } catch (error) {
                console.error('Error fetching price:', error);
            }
        };
        fetchPrice();
    }, []);

    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 === '待机')
                    .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]);

    // old
    // const formattedConnectorDropdownOptions = availableConnectorDropdownOptions.map((id, index) => ({
    //     label: (index + 1).toString(),
    //     value: id
    // }));
    const connectorIDToLabelMap = {
        '101708240502475001': '1',
        '101708240502476001': '2',
        '101708240502477001': '3',
        '101708240502478001': '4',
        '101708240502474001': '5',
        '101708240502474002': '6'
    };

    console.log('availableConnectorDropdownOptions', availableConnectorDropdownOptions);
    const formattedConnectorDropdownOptions = availableConnectorDropdownOptions
        .map((id) => ({
            label: connectorIDToLabelMap[id] || '',
            value: id
        }))
        .filter((option) => option.label !== '')
        .sort((a, b) => parseInt(a.label) - parseInt(b.label));
    console.log('formattedConnectorDropdownOptions', formattedConnectorDropdownOptions);

    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));
    };

    const handleConfirmation = (value: any) => {
        setModalVisible(true);
        const selectedOption = formattedConnectorDropdownOptions.find((option) => option.value === value);
        const label = selectedOption ? selectedOption.label : '';
        setRouterParams({
            pathname: '/bookingConfirmationPage',
            params: {
                chargeStationName,
                chargeStationAddress,
                chargeStationID,
                connectorID: value,
                connectorLabel: label,
                userID,
                carCapacitance: carCapacitance,
                carID: selectedCarID,
                carName: selectedCar,
                date: selectedDate,
                bookTime: selectedTime,
                chargingMethod: stopChargingUponBatteryFull ? 'stopChargingUponBatteryFull' : 'chargingBasedOnWatt',
                chargingWatt: selectedWatt || '',
                price: price
            }
        });
    };

    const handleModalConfirm = () => {
        // Alert.alert('提示', '此功能正在準備中，敬請期待', [{ text: '確定', onPress: () => router.push('/mainPage') }], {
        //     cancelable: false
        // });
        setModalVisible(false);
        if (routerParams) {
            router.push(routerParams);
        }
    };

    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);
                                        handleConfirmation(value);
                                    }}
                                    extendedStyle={{
                                        borderColor: '#34667c',
                                        marginTop: 4,
                                        padding: 12
                                    }}
                                />

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

                                <Modal
                                    isVisible={isModalVisible}
                                    // onBackdropPress={() => setModalVisible(false)}
                                    backdropOpacity={0.5}
                                    animationIn="fadeIn"
                                    animationOut="fadeOut"
                                >
                                    <View style={styles.modalContent}>
                                        <Text style={styles.modalText}>
                                            若客戶逾時超過15分鐘，系統將視作自動放棄預約，客戶需要重新預約一次。
                                            本公司有權保留全數費用，恕不退還。按下確認代表您已閱讀並同意上述條款。
                                        </Text>
                                        <NormalButton
                                            title={<Text className="text-white">我確認</Text>}
                                            onPress={handleModalConfirm}
                                            extendedStyle={styles.confirmButton}
                                        />
                                    </View>
                                </Modal>
                            </View>
                        </AccordionItem>
                    </View>
                </View>

                {/* {routerParams ? (
                    <View className="mx-[5%] my-4">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        fontWeight: '700',
                                        fontSize: 20,
                                        color: '#fff'
                                    }}
                                >
                                    新增
                                </Text>
                            }
                            onPress={() => handleConfirmation(selectedChargingGun)}
                        />
                    </View>
                ) : (
                    ''
                )} */}

                <View className="mx-[5%] flex-1">
                    <Text className="text-xl pb-2 mt-6" 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
    },
    modalContent: {
        backgroundColor: 'white',
        padding: 22,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 4,
        borderColor: 'rgba(0, 0, 0, 0.1)'
    },
    modalText: {
        fontSize: 18,
        marginBottom: 12,
        textAlign: 'center'
    },
    confirmButton: {
        backgroundColor: '#34667c',
        paddingHorizontal: 30,
        paddingVertical: 10,
        borderRadius: 5
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});