crazycharge-app/component/resultDetailPage/resultDetailPageComponent.tsx

import {
    View,
    Text,
    ScrollView,
    Image,
    useWindowDimensions,
    StyleSheet,
    Pressable
} from 'react-native';
import React, { useEffect, useState } from 'react';

import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
import NormalButton from '../global/normal_button';
import { router, useLocalSearchParams } from 'expo-router';
import {
    CheckMarkLogoSvg,
    DirectionLogoSvg,
    PreviousPageSvg
} from '../global/SVG';
import { SafeAreaView } from 'react-native-safe-area-context';
import { chargeStationService } from '../../service/chargeStationService';

interface ChargingStationTabViewProps {
    titles: string[];
}

const ChargingStationTabView: React.FC<ChargingStationTabViewProps> = ({
    titles
}) => {
    const layout = useWindowDimensions();

    //tab 1
    const FirstRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg" style={styles.text}>
                這是一段有關充電站的說明
            </Text>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView style={{ flex: 1, marginHorizontal: '5%' }}>
            <Text className="text-lg " style={styles.text}>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident
            </Text>
        </ScrollView>
    );

    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 ? '#000000' : '#CCCCCC',
                        fontWeight: focused ? '300' : 'thin',
                        fontSize: 17
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#000000',
                height: 1
            }}
            style={{
                backgroundColor: 'white',

                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};

const ResultDetailPageComponent = () => {
    const params = useLocalSearchParams();
    const chargeStationID = params.chargeStationID as string;
    const [price, setPrice] = useState('');
    useEffect(() => {
        const fetchPrice = async () => {
            try {
                const price =
                    await chargeStationService.fetchChargeStationPrice(
                        chargeStationID
                    );
                setPrice(price);
                // Do something with the price, like setting it to state
            } catch (error) {
                console.error('Error fetching price:', error);
            }
        };
        fetchPrice();
    }, []);

    return (
        <SafeAreaView
            edges={['top', 'left', 'right']}
            className="flex-1 bg-white"
        >
            <ScrollView className="flex-1 ">
                <View className="relative">
                    <Image
                        source={require('../../assets/dummyStationPicture.png')}
                        resizeMode="cover"
                        style={{ flex: 1, width: '100%' }}
                    />
                    <View className="absolute top-8 left-7 ">
                        <Pressable
                            onPress={() => {
                                if (router.canGoBack()) {
                                    router.back();
                                } else {
                                    router.replace('./');
                                }
                            }}
                        >
                            <PreviousPageSvg />
                        </Pressable>
                    </View>
                </View>

                <View className="flex-column mx-[5%] mt-[5%]">
                    <View>
                        <Text className="text-3xl">
                            {params.chargeStationName}
                        </Text>
                    </View>
                    <View className="flex-row justify-between items-center">
                        <Text
                            className="text-base"
                            style={{ color: '#888888' }}
                        >
                            {params.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('路線')}
                            extendedStyle={{
                                backgroundColor: '#E3F2F8',
                                borderRadius: 61,
                                paddingHorizontal: 20,
                                paddingVertical: 10
                            }}
                        />
                    </View>
                    <View className="flex-row space-x-2 items-center pb-3 ">
                        <CheckMarkLogoSvg />
                        <Text>Walk-In</Text>
                        <Text>400m</Text>
                    </View>
                    <NormalButton
                        title={
                            <View className="pr-2">
                                <Text
                                    style={{
                                        color: '#FFFFFF',
                                        fontWeight: 700,
                                        fontSize: 20
                                    }}
                                >
                                    ＋ 新增預約
                                </Text>
                            </View>
                        }
                        // onPress={() => console.log('ab')}
                        onPress={() => router.push('makingBookingPage')}
                        extendedStyle={{ flex: 0.5 }}
                    />
                    <View
                        className="flex-1 flex-row min-h-[20px] border-slate-300 my-6 rounded-2xl"
                        style={{ borderWidth: 1 }}
                    >
                        <View className="flex-1 m-4">
                            <View className="flex-1 flex-row ">
                                <View className=" flex-1 flex-column  justify-between">
                                    <Text
                                        className="text-xl "
                                        style={styles.text}
                                    >
                                        收費
                                    </Text>

                                    <View className="flex-row items-center space-x-2">
                                        <Text className="text-3xl text-[#02677D]">
                                            $20
                                        </Text>
                                        <Text style={styles.text}>
                                            每15分鐘
                                        </Text>
                                    </View>
                                </View>
                                <View className="items-center justify-center">
                                    <View className="w-[1px] h-[60%] bg-[#CCCCCC]" />
                                </View>
                                <View className="flex-1 flex-column ">
                                    <View className="flex-1"></View>
                                    <View className="flex-row items-center ml-4 space-x-2 ">
                                        <Text className="text-3xl text-[#02677D]">
                                            ${price}
                                        </Text>
                                        <Text style={styles.text}>每度電</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>

                <View className="min-h-[300px]">
                    <Text className="text-xl pb-2 mx-[5%]" style={styles.text}>
                        充電站資訊
                    </Text>
                    <ChargingStationTabView titles={['充電插頭', '其他']} />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ResultDetailPageComponent;

const styles = StyleSheet.create({
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});