crazycharge-app/component/reservationLocationPage/reservationLocationPage.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 NormalInput from '../global/normal_input';
import { router } from 'expo-router';

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

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

const CheckMarkLogoSvg = () => (
    <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
        <Rect width="20" height="20" rx="10" fill="#02677D" />
        <Path
            d="M7.95837 15L3.20837 10.25L4.39587 9.06251L7.95837 12.625L15.6042 4.97917L16.7917 6.16667L7.95837 15Z"
            fill="white"
        />
    </Svg>
);

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 (
                        <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>
                    );
                }}
                estimatedItemSize={10}
            />
        </View>
    );

    //tab 2
    const SecondRoute = () => (
        <View style={{ flex: 1, backgroundColor: 'white' }}>
            <FlashList
                data={tabItems}
                renderItem={({ item }) => {
                    return (
                        <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>
                    );
                }}
                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,
                marginHorizontal: 15,
                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, margin: 15, borderRadius: 10 },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 22 }
});

const ReservationLocationPage = () => {
    const CrossLogoSvg = () => (
        <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <Path
                d="M2.33333 23.3333L0 21L9.33333 11.6667L0 2.33333L2.33333 0L11.6667 9.33333L21 0L23.3333 2.33333L14 11.6667L23.3333 21L21 23.3333L11.6667 14L2.33333 23.3333Z"
                fill="#222222"
            />
        </Svg>
    );

    return (
        <SafeAreaView className="flex-1 bg-white">
            <View className="flex-1 mx-[5%]">
                <View className="min-h-[250px] flex-column">
                    <View className="flex-2 justify-center ">
                        <View className="pt-6 ">
                            {/* For now, clicking the X button goes back to login page. */}
                            {/* Once home page component is created, i will change it */}
                            <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 mb-6 ">
                        <NormalInput
                            placeholder="搜尋所有充電站或地區.."
                            onChangeText={() => console.log('input')}
                            extendedStyle={{ padding: 20 }}
                        />
                    </View>
                </View>
                <View className="flex-1">
                    <LocationTabComponent
                        titles={['附近的充電站', '所有的充電站']}
                        tabItems={dummyTabItems}
                    />
                </View>
            </View>
        </SafeAreaView>
    );
};

export default ReservationLocationPage;