crazycharge-app/component/searchPage/searchResultComponent.tsx

import {
    View,
    Text,
    StyleSheet,
    Pressable,
    Image,
    ImageSourcePropType,
    TouchableWithoutFeedback,
    Keyboard,
    ActivityIndicator
} from 'react-native';
import React, { useState, useEffect, useRef, useMemo } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import MapView, { Marker, Region } from 'react-native-maps';
import * as Location from 'expo-location';
import { router, useLocalSearchParams } from 'expo-router';
import { ArrowIconSvg, CheckMarkLogoSvg } from '../global/SVG';
import NormalInput from '../global/normal_input';
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
import { chargeStationService } from '../../service/chargeStationService';
import { calculateDistance } from '../global/distanceCalculator';

interface TabItem {
    imgURL: ImageSourcePropType;
    date: string;
    time: string;
    chargeStationName: string;
    chargeStationAddress: string;
    distance: string;
    stationID: string;
    lat: number;
    lng: number;
}

// **************************************
// TODO: PUT THE GOOGLE MAP API KEY in ENV
const GOOGLE_API_KEY = 'AIzaSyDYVSNuXFDNOhZAKfqeSwBTc8Pa7hKma1A';
// ***************************************

const SearchResultComponent = () => {
    const [region, setRegion] = useState<Region>({
        latitude: 22.302711, // Default to Hong Kong coordinates
        longitude: 114.177216,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01
    });

    const [errorMsg, setErrorMsg] = useState<string | null>(null);
    const [searchInput, setSearchInput] = useState<string>('');
    const sheetRef = useRef<BottomSheet>(null);
    const snapPoints = useMemo(() => ['25%', '65%'], []);
    const mapRef = useRef<MapView>(null);
    const params = useLocalSearchParams();
    const [filteredItems, setFilteredItems] = useState<TabItem[]>([]);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (params.latitude && params.longitude) {
            setRegion({
                latitude: parseFloat(params.latitude as string),
                longitude: parseFloat(params.longitude as string),
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            });
        } else {
            (async () => {
                let { status } = await Location.requestForegroundPermissionsAsync();
                if (status !== 'granted') {
                    setErrorMsg('Permission to access location was denied');
                    return;
                }
                let myLocation = await Location.getLastKnownPositionAsync({});
                if (myLocation) {
                    setRegion({
                        latitude: myLocation.coords.latitude,
                        longitude: myLocation.coords.longitude,
                        latitudeDelta: 0.01,
                        longitudeDelta: 0.01
                    });
                }
            })();
        }
    }, []);

    useEffect(() => {
        if (mapRef.current && region) {
            mapRef.current.animateToRegion(region, 1000);
        }
    }, [region]);

    if (errorMsg) {
        return (
            <View className="flex-1 justify-center items-center ">
                <Text className="text-red-500">{errorMsg}</Text>
            </View>
        );
    }

    const handleRegionChange = (newRegion: Region) => {
        if (mapRef.current) {
            mapRef.current.animateToRegion(newRegion, 1000);
        }
        setRegion(newRegion);
        sheetRef.current?.snapToIndex(0);
    };

    // ************************************************************************************************
    const [currentLocation, setCurrentLocation] = useState<Location.LocationObject | null>(null);
    const [stations, setStations] = useState([]);
    const [tabItems, setTabItems] = useState<TabItem[]>([]);

    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);
    };
    useEffect(() => {
        getCurrentLocation();
    }, []);

    const fetchStations = async () => {
        setIsLoading(true);
        const fetchedStations = await chargeStationService.fetchChargeStations();
        setStations(fetchedStations);

        if (currentLocation) {
            const TabItems = await Promise.all(
                fetchedStations.map(async (station) => {
                    const distance = await calculateDistance(
                        Number(station.StationLat),
                        Number(station.StationLng),
                        currentLocation
                    );

                    return {
                        chargeStationAddress: station.Address,
                        chargeStationName: station.StationName,
                        lng: station.StationLng,
                        lat: station.StationLat,
                        date: '今天',
                        stationID: station.StationID,
                        imgURL: require('../../assets/dummyStationPicture.png'),
                        distance: distance !== null ? formatDistance(distance) : 'N/A'
                    };
                })
            );
            setTabItems(TabItems);
            setIsLoading(false);
        }
    };

    useEffect(() => {
        if (currentLocation) {
            fetchStations();
        }
    }, [currentLocation]);

    const formatDistance = (distanceInMeters: number): string => {
        if (distanceInMeters < 1000) {
            return `${Math.round(distanceInMeters)}米`;
        } else {
            const distanceInKm = distanceInMeters / 1000;

            return `${distanceInKm.toFixed(1)}公里`;
        }
    };

    // ************************************************************************************************************************************************
    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <SafeAreaView className="flex-1" edges={['top', 'left', 'right']}>
                <View className="flex-1 relative">
                    <View
                        style={{
                            position: 'absolute',
                            top: 10,
                            left: 10,
                            right: 10,
                            zIndex: 1,
                            backgroundColor: 'transparent',
                            alignItems: 'center'
                        }}
                    >
                        <View className=" flex-1 flex-row bg-white rounded-xl">
                            <Pressable
                                style={styles.leftArrowBackButton}
                                onPress={() => {
                                    if (router.canGoBack()) {
                                        router.back();
                                    } else {
                                        router.replace('/(auth)/(tabs)/(home)');
                                    }
                                }}
                            >
                                <ArrowIconSvg />
                            </Pressable>
                            <NormalInput
                                placeholder="搜尋這裡"
                                onChangeText={(text) => {
                                    setSearchInput(text);
                                    console.log(text);
                                }}
                                extendedStyle={styles.textInput}
                            />
                        </View>
                        {filteredItems.length > 0 && (
                            <View style={styles.dropdown}>
                                <View>
                                    {filteredItems.map((item, index) => (
                                        <Pressable
                                            key={index}
                                            onPress={() => {
                                                setSearchInput(item.chargeStationName);
                                                setFilteredItems([]);
                                                handleRegionChange({
                                                    latitude: item.lat,
                                                    longitude: item.lng,
                                                    latitudeDelta: 0.01,
                                                    longitudeDelta: 0.01
                                                });
                                            }}
                                            style={({ pressed }) => [
                                                styles.dropdownItem,
                                                pressed && styles.dropdownItemPress
                                            ]}
                                        >
                                            <Text>{item.chargeStationName}</Text>
                                        </Pressable>
                                    ))}
                                </View>
                            </View>
                        )}
                    </View>
                    <MapView
                        ref={mapRef}
                        provider="google"
                        style={styles.map}
                        region={region}
                        // initialRegion={region}
                        cameraZoomRange={{
                            minCenterCoordinateDistance: 500,
                            maxCenterCoordinateDistance: 90000,
                            animated: true
                        }}
                        showsUserLocation={true}
                        showsMyLocationButton={false}
                    >
                        {tabItems.map((item, index) => (
                            <Marker
                                key={index}
                                coordinate={{
                                    latitude: item.lat,
                                    longitude: item.lng
                                }}
                                title={item.chargeStationName}
                                description={item.chargeStationAddress}
                            />
                        ))}
                    </MapView>
                    <BottomSheet ref={sheetRef} index={0} snapPoints={snapPoints}>
                        <BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
                            <View className="flex-1 mx-[5%]">
                                {isLoading ? (
                                    <View className="pt-14">
                                        <ActivityIndicator color="#34657b" />
                                    </View>
                                ) : (
                                    tabItems
                                        .filter((item) => item.chargeStationName.includes(searchInput.toUpperCase()))
                                        .map((item, index) => {
                                            return (
                                                <Pressable
                                                    key={index}
                                                    onPress={() => {
                                                        handleRegionChange({
                                                            latitude: item.lat,
                                                            longitude: item.lng,
                                                            latitudeDelta: 0.01,
                                                            longitudeDelta: 0.01
                                                        });
                                                        router.push({
                                                            pathname: '/resultDetailPage',
                                                            params: {
                                                                chargeStationAddress: item.chargeStationAddress,
                                                                chargeStationID: item.stationID,
                                                                chargeStationName: item.chargeStationName,
                                                                chargeStationLat: item.lat,
                                                                chargeStationLng: item.lng
                                                            }
                                                        });
                                                    }}
                                                    style={({ pressed }) => [
                                                        styles.container,
                                                        {
                                                            backgroundColor: pressed ? '#e7f2f8' : '#ffffff'
                                                        }
                                                    ]}
                                                >
                                                    <View style={styles.rowContainer}>
                                                        <Image style={styles.image} source={item.imgURL} />
                                                        <View style={styles.textContainer}>
                                                            <Text
                                                                style={{
                                                                    fontWeight: '400',
                                                                    fontSize: 18,
                                                                    color: '#222222'
                                                                }}
                                                            >
                                                                {item.chargeStationName}
                                                            </Text>
                                                            <Text
                                                                style={{
                                                                    fontWeight: '400',
                                                                    fontSize: 14,
                                                                    color: '#888888'
                                                                }}
                                                            >
                                                                {item.chargeStationAddress}
                                                            </Text>
                                                            <View className="flex-row space-x-2 items-center">
                                                                <CheckMarkLogoSvg />
                                                                <Text
                                                                    style={{
                                                                        fontWeight: '400',
                                                                        fontSize: 14,
                                                                        color: '#222222'
                                                                    }}
                                                                >
                                                                    Walk-in
                                                                </Text>
                                                            </View>
                                                        </View>
                                                        <Text
                                                            style={{
                                                                fontWeight: '400',
                                                                fontSize: 16,
                                                                color: '#888888',
                                                                marginTop: 22
                                                            }}
                                                            className="flex-1 text-right"
                                                        >
                                                            {item.distance}
                                                        </Text>
                                                    </View>
                                                </Pressable>
                                            );
                                        })
                                )}
                            </View>
                        </BottomSheetScrollView>
                    </BottomSheet>
                </View>
            </SafeAreaView>
        </TouchableWithoutFeedback>
    );
};

export default SearchResultComponent;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    map: {
        flex: 1,
        width: '100%',
        height: '100%'
    },
    contentContainer: {
        backgroundColor: 'white'
    },
    itemContainer: {
        padding: 6,
        margin: 6,
        backgroundColor: '#eee'
    },
    image: {
        width: 100,
        height: 100,
        marginTop: 15,
        marginRight: 15,

        borderRadius: 10
    },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 22 },
    rowContainer: { flexDirection: 'row' },
    textInput: {
        width: '85%',
        maxWidth: '100%',
        fontSize: 16,
        padding: 20,
        paddingLeft: 0,
        borderLeftWidth: 0,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderRightWidth: 1,
        borderBottomRightRadius: 12,
        borderTopRightRadius: 12,
        borderRadius: 0,
        borderColor: '#bbbbbb'
    },
    leftArrowBackButton: {
        width: '15%',
        maxWidth: '100%',
        fontSize: 16,
        padding: 20,
        paddingLeft: 30,
        borderBottomLeftRadius: 12,
        borderTopLeftRadius: 12,
        borderColor: '#bbbbbb',
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderLeftWidth: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },
    dropdown: {
        backgroundColor: 'white',
        borderBottomLeftRadius: 12,
        borderBottomRightRadius: 12,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderBottomWidth: 1,
        marginTop: 10,
        maxHeight: 200,
        width: '100%',
        position: 'absolute',
        top: 50,
        zIndex: 2,
        borderColor: '#bbbbbb'
    },
    dropdownItem: {
        padding: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd'
    },
    dropdownItemPress: {
        backgroundColor: '#e8f8fc'
    }
});