crazycharge-app/component/reservationLocationPage/reservationLocationPageComponent.tsx

import Svg, { Path, Rect } from 'react-native-svg';
import * as React from 'react';
import {
    View,
    Text,
    useWindowDimensions,
    StyleSheet,
    Image,
    ImageSourcePropType,
    Pressable
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import { FlashList } from '@shopify/flash-list';
import { SafeAreaView } from 'react-native-safe-area-context';

import { router } from 'expo-router';
import { CheckMarkLogoSvg, CrossLogoSvg } from '../global/SVG';

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

interface TabViewComponentProps {
    titles: string[];
    tabItems: TabItem[];
}

const dummyTabItems: TabItem[] = [
    {
        imgURL: require('../../assets/dummyStationPicture.png'),
        date: '今天',
        time: '16:30',
        chargeStationName: '上環街市充電站',
        chargeStationAddress: '香港上環皇后大道中345號',
        distance: '400米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture2.png'),
        date: '3月15',
        time: '17:45',
        chargeStationName: '中環IFC充電站',
        chargeStationAddress: '香港中環皇后大道中999號',
        distance: '680米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture2.png'),
        date: '4月20',
        time: '12:30',
        chargeStationName: '中環IFC充電站',
        chargeStationAddress: '香港中環皇后大道中999號',
        distance: '680米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture.png'),
        date: '今天',
        time: '16:30',
        chargeStationName: '上環街市充電站',
        chargeStationAddress: '香港上環皇后大道中345號',
        distance: '400米'
    },
    {
        imgURL: require('../../assets/dummyStationPicture.png'),
        date: '今天',
        time: '16:30',
        chargeStationName: '上環街市充電站',
        chargeStationAddress: '香港上環皇后大道中345號',
        distance: '400米'
    }
];

const LocationTabComponent: React.FC<TabViewComponentProps> = ({
    titles,
    tabItems
}) => {
    const layout = useWindowDimensions();

    const FirstRoute = () => (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <FlashList
                data={tabItems}
                renderItem={({ item }) => {
                    return (
                        <Pressable
                            // onPress={() => console.log('clicked')}
                            onPress={() => router.push('resultDetailPage')}
                            style={({ pressed }) => [
                                styles.container,
                                {
                                    backgroundColor: pressed
                                        ? '#e7f2f8'
                                        : '#ffffff'
                                }
                            ]}
                        >
                            <View style={styles.container}>
                                <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
                                    }}
                                >
                                    {item.distance}
                                </Text>
                            </View>
                        </Pressable>
                    );
                }}
                estimatedItemSize={10}
            />
        </View>
    );

    //tab 2

    const SecondRoute = () => (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <FlashList
                data={tabItems}
                renderItem={({ item }) => {
                    return (
                        <Pressable
                            // onPress={() => console.log('clicked')}
                            onPress={() => router.push('resultDetailPage')}
                            style={({ pressed }) => [
                                styles.container,
                                {
                                    backgroundColor: pressed
                                        ? '#e7f2f8'
                                        : '#ffffff'
                                }
                            ]}
                        >
                            <View style={styles.container}>
                                <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
                                    }}
                                >
                                    {item.distance}
                                </Text>
                            </View>
                        </Pressable>
                    );
                }}
                estimatedItemSize={10}
            />
        </View>
    );
    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#025c72' : '#888888',
                        fontWeight: focused ? '900' : 'thin',
                        fontSize: 20
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#025c72'
            }}
            style={{
                backgroundColor: 'white',
                borderColor: '#DBE4E8',
                elevation: 0,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

const styles = StyleSheet.create({
    container: { flexDirection: 'row' },
    image: {
        width: 100,
        height: 100,
        marginTop: 15,
        marginRight: 15,

        borderRadius: 10
    },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 22 }
});

const ReservationLocationPage = () => {
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'left', 'right']}
        >
            <View className="flex-1 mx-[5%] ">
                <View className="min-h-[250px] flex-column">
                    <View className="flex-1 justify-center">
                        <View className="pt-5 pl-4">
                            <Pressable
                                onPress={() => {
                                    if (router.canGoBack()) {
                                        router.back();
                                    } else {
                                        router.replace('/');
                                    }
                                }}
                            >
                                <CrossLogoSvg />
                            </Pressable>
                        </View>
                    </View>
                    <View className="flex-1 justify-center ">
                        <Text className="text-[50px] font-normal ">
                            預約地點
                        </Text>
                    </View>
                    <View className="flex-1 justify-center ">
                        <Pressable onPress={() => router.push('searchPage')}>
                            <View
                                style={{
                                    borderWidth: 1,
                                    padding: 24,
                                    borderRadius: 12,
                                    borderColor: '#bbbbbb',
                                    maxWidth: '100%'
                                }}
                            >
                                <Text
                                    style={{ color: '#888888', fontSize: 16 }}
                                >
                                    搜尋充電站或地區..
                                </Text>
                            </View>
                        </Pressable>
                    </View>
                </View>

                <View className="flex-1 mt-2">
                    <LocationTabComponent
                        titles={['附近的充電站', '所有的充電站']}
                        tabItems={dummyTabItems}
                    />
                </View>
            </View>
        </SafeAreaView>
    );
};

export default ReservationLocationPage;