import { View, Text, ScrollView, Dimensions } from 'react-native';
import React from 'react';
import NormalButton from './normal_button';
import Svg, { Path } from 'react-native-svg';
import { BookingIconSvg } from './SVG';



const calculateResponsivePadding = () => {
    const screenHeight = Dimensions.get('window').height;
    return screenHeight * 0.01; // 3% of screen height, adjust as needed
};
const RecentBookedRowItemsData = [
    { chargingStationName: '充電站#1', chargingStationAddress: '充電站#1地址' },
    { chargingStationName: '充電站#2', chargingStationAddress: '充電站#2地址' },
    { chargingStationName: '充電站#3', chargingStationAddress: '充電站#3地址' },
    { chargingStationName: '充電站#4', chargingStationAddress: '充電站#4地址' },
    { chargingStationName: '充電站#5', chargingStationAddress: '充電站#5地址' },
    { chargingStationName: '充電站#6', chargingStationAddress: '充電站#6地址' },
    { chargingStationName: '充電站#7', chargingStationAddress: '充電站#7地址' },
    { chargingStationName: '充電站#8', chargingStationAddress: '充電站#8地址' }
];

const RecentBookedRowItems = ({
    chargingStationName,
    chargingStationAddress
}: {
    chargingStationName: string;
    chargingStationAddress: string;
}) => (
    <View
        style={{
            flexDirection: 'row',
            alignItems: 'center'
        }}
    >
        <BookingIconSvg />
        <View
            style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                flex: 1,
                borderBottomWidth: 0.5,
                paddingVertical: calculateResponsivePadding(),
                borderColor: '#ccc',
                borderRadius: 8
            }}
        >
            <View
                style={{
                    marginLeft: 15,
                    gap: 3
                }}
            >
                <Text
                    style={{
                        fontSize: 16,
                        color: '#222222'
                    }}
                >
                    {chargingStationName}
                </Text>
                <Text
                    style={{
                        fontSize: 16,
                        color: '#888888'
                    }}
                >
                    {chargingStationAddress}
                </Text>
            </View>
            <NormalButton
                title={<Text style={{ color: '#061E25' }}>重新預約</Text>}
                onPress={() => console.log('abc')}
                buttonPressedStyle={{
                    backgroundColor: '#CFDEE4'
                }}
                extendedStyle={{
                    backgroundColor: '#E3F2F8',
                    paddingHorizontal: 25,
                    paddingVertical: 1,
                    borderRadius: 8
                }}
            />
        </View>
    </View>
);

const RecentlyBookedScrollView = () => {
    return (
        <View className="py-6 flex-column">
            <Text
                style={{
                    fontWeight: 400,
                    fontSize: 16,
                    color: '#222222',
                    marginBottom: '5%'
                }}
            >
                近期預約過
            </Text>
            <View className="">
                {RecentBookedRowItemsData.slice(0, 2).map((item) => (
                    <RecentBookedRowItems
                        key={`${item.chargingStationName}+${item.chargingStationAddress}`}
                        chargingStationName={item.chargingStationName}
                        chargingStationAddress={item.chargingStationAddress}
                    />
                ))}
            </View>
        </View>
    );
};

export default RecentlyBookedScrollView;