crazycharge-app/component/searchPage/searchPageComponent.tsx

import { ScrollView, Text, View, StyleSheet, Pressable, ImageSourcePropType } from 'react-native';
import NormalInput from '../global/normal_input';
import NormalButton from '../global/normal_button';
import { FlashList } from '@shopify/flash-list';
import { ArrowIconSvg } from '../global/SVG';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useEffect, useRef, useState } from 'react';
import { router } from 'expo-router';
import extractedInfoStore from '../../providers/extractedReservationInfo_store';

interface BookingHistory {
    charingStationName: string;
    chargingStationAddress: string;
}

interface SearchPageComponentProps {}

interface TabItem {
    imgURL: ImageSourcePropType;
    date: string;
    time: string;
    chargeStationName: string;
    chargeStationAddress: string;
    distance: string;
    latitude: number;
    longitude: number;
}

const dummyTabItems: TabItem[] = [
    {
        imgURL: require('../../assets/dummyStationPicture.png'),
        date: '今天',
        time: '16:30',
        chargeStationName: '觀塘偉業街充電站',
        chargeStationAddress: '九龍觀塘偉業街143號地下',
        distance: '400米',
        latitude: 22.310958,
        longitude: 114.226065
    },
    {
        imgURL: require('../../assets/dummyStationPicture2.png'),
        date: '3月15',
        time: '17:45',
        chargeStationName: '中環IFC充電站',
        chargeStationAddress: '香港中環皇后大道中999號',
        distance: '680米',
        latitude: 22.28552,
        longitude: 114.15769
    }
];
const SearchPageComponent: React.FC<SearchPageComponentProps> = () => {
    const inputRef = useRef(null);

    const extractedInfo = extractedInfoStore((state) => state.extractedInfo);
    console.log('extracted:                      ', extractedInfo);
    const [searchInput, setSearchInput] = useState<string>('');

    const [filteredItems, setFilteredItems] = useState<TabItem[]>([]);
    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.focus();
        }
    }, []);
    useEffect(() => {
        if (searchInput === '') {
            setFilteredItems([]);
        } else {
            const filteredData = dummyTabItems.filter((item) =>
                item.chargeStationName.includes(searchInput.toLocaleUpperCase())
            );
            setFilteredItems(filteredData);
        }
    }, [searchInput]);

    return (
        <SafeAreaView edges={['top', 'right', 'left']} className="flex-1 bg-white">
            <ScrollView className=" flex-1 mx-[5%] pt-6 " showsVerticalScrollIndicator={false}>
                <View className="flex-column gap-4 ">
                    <View className=" flex-1 flex-row ">
                        <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}
                            ref={inputRef}
                        />
                    </View>

                    {filteredItems.length > 0 && (
                        <View style={styles.dropdown}>
                            <View>
                                {filteredItems.map((item, index) => (
                                    <Pressable
                                        key={index}
                                        onPress={() => {
                                            setSearchInput(item.chargeStationName);
                                            setFilteredItems([]);
                                            router.push({
                                                pathname: '/searchResultPage',
                                                params: {
                                                    latitude: item.latitude,
                                                    longitude: item.longitude,
                                                    chargeStationName: item.chargeStationName
                                                }
                                            });
                                        }}
                                        style={({ pressed }) => [
                                            styles.dropdownItem,
                                            pressed && styles.dropdownItemPress
                                        ]}
                                    >
                                        <Text>{item.chargeStationName}</Text>
                                    </Pressable>
                                ))}
                            </View>
                        </View>
                    )}

                    <ScrollView horizontal={true} className="space-x-4" showsHorizontalScrollIndicator={false}>
                        <View>
                            <NormalButton
                                title={<Text style={{ color: '#061E25' }}>瀏覽地圖查看現有充電站</Text>}
                                // onPress={() => console.log('附近的充電站')}
                                onPress={() => router.push('/(auth)/(tabs)/(home)/(booking)/searchResultPage')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        {/* <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        可Walk-in的充電站
                                    </Text>
                                }
                                onPress={() => console.log('可Walk-in的充電站')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        Test Tab #1
                                    </Text>
                                }
                                onPress={() => console.log('Test Tab #1')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View>
                        <View>
                            <NormalButton
                                title={
                                    <Text style={{ color: '#061E25' }}>
                                        Test Tab #2
                                    </Text>
                                }
                                onPress={() => console.log('Test Tab #2')}
                                buttonPressedStyle={{
                                    backgroundColor: '#CFDEE4'
                                }}
                                extendedStyle={{
                                    backgroundColor: '#E3F2F8',
                                    borderRadius: 8,
                                    paddingVertical: 12
                                }}
                            />
                        </View> */}
                    </ScrollView>
                    <View className="h-[1000px]">
                        <Text
                            style={{
                                fontWeight: 400,
                                fontSize: 16,
                                color: '#222222',
                                paddingTop: 6
                            }}
                        >
                            預約記錄
                        </Text>

                        <FlashList
                            estimatedItemSize={10}
                            // data={bookingHistoryData}
                            data={extractedInfo}
                            renderItem={({ item }) => (
                                <View className="flex-column py-2 pt-4 border-b border-gray-300">
                                    <Pressable
                                        // onPress={() => console.log('abc')}
                                        onPress={() => {
                                            router.push({
                                                pathname: '/resultDetailPage',
                                                params: {
                                                    chargeStationAddress: item.address,
                                                    chargeStationID: item.stationID,
                                                    chargeStationName: item.stationName

                                                    // chargeStationLng: item.lng,
                                                    // chargeStationLat: item.lat
                                                }
                                            });
                                        }}
                                    >
                                        <Text className="text-base text-[#222222]">{item.stationName}</Text>
                                        <Text className="text-sm text-[#888888]">{item.address}</Text>
                                    </Pressable>
                                </View>
                            )}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default SearchPageComponent;

const styles = StyleSheet.create({
    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'
    },
    textInput: {
        // width: '100',
        // maxWidth: '100%',
        flex: 1,
        fontSize: 16,
        padding: 20,
        paddingLeft: 0,
        borderLeftWidth: 0,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        borderRightWidth: 1,
        borderBottomRightRadius: 12,
        borderTopRightRadius: 12,
        borderRadius: 0,
        borderColor: '#bbbbbb'
    },
    dropdown: {
        backgroundColor: 'white',
        borderWidth: 1,
        borderBottomLeftRadius: 12,
        borderBottomRightRadius: 12,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        // borderBottomWidth: 1,
        marginTop: 10,
        maxHeight: 200,
        width: '96%',
        position: 'absolute',
        top: 50,
        zIndex: 2,
        borderColor: '#bbbbbb'
    },
    // 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,
        borderBottomColor: '#ddd'
    },
    dropdownItemPress: {
        backgroundColor: '#e8f8fc'
    }
});