import { Dimensions, Image, Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import GlobalApi from '@/app/misc/GlobalApi'
import AntDesign from '@expo/vector-icons/AntDesign';
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
import { getFirestore } from "firebase/firestore";
import { app } from "../../misc/FirebaseConfig";
import { doc, setDoc, deleteDoc} from "firebase/firestore";
import { useUser } from '@clerk/clerk-expo';

const ItemList = ({place, isSave, markedSave}) => {
    const placePhoto_Base_Url = 'https://places.googleapis.com/v1/'
    const {user} = useUser();
    const db = getFirestore(app);
    const onSave = async(place) => {
        await setDoc(doc(db, 'ev-save', (place.id).toString()), {
            place: place,
            email: user?.primaryEmailAddress?.emailAddress
        });
        markedSave();
    };
    const onRemoveSave = async(placeId) => {
        await deleteDoc(doc(db, 'ev-save', placeId.toString()));
        markedSave();
    }

    const onStartClick = () => {
        const url = Platform.select({
            ios: "maps:"+place?.location?.latitude+","+place?.location?.longitude+"?q="+place?.formattedAddress,
        });
        Linking.openURL(url);
    }
    

  return (
    <View style={{width: Dimensions.get('screen').width *0.92, height: 280, backgroundColor: 'white', marginLeft: 10, marginVertical: 5 ,borderRadius: 5, flexDirection: 'column', justifyContent: 'space-between'}}>
        {!isSave? 
        <Pressable onPress={() => onSave(place)}
            style={{position: 'absolute', zIndex: 20, right: 0, margin: 10, width: 40, height: 40, backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', borderRadius: '50%'}}>
            <AntDesign name="pluscircleo" size={30} color="white" />
        </Pressable> :
        <Pressable onPress={() => onRemoveSave(place.id)}
            style={{position: 'absolute', zIndex: 20, right: 0, margin: 10, width: 40, height: 40, backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', borderRadius: '50%'}}>
            <MaterialCommunityIcons name="map-marker-star" size={30} color="white" /> 
        </Pressable> 
        }
        <Image source={place?.photos?{uri:placePhoto_Base_Url+place.photos[0].name+"/media?key="+GlobalApi.API_KEY+"&maxHeightPx=500&maxWidthPx=500"} 
            : require('../../../assets/images/ev_images/EV.png')} style={{width: '100%', height: 120, objectFit: 'cover', borderTopLeftRadius: 5, borderTopRightRadius: 5}}/>
        <View style={{padding: 10, flexDirection: 'column', justifyContent: 'space-between'}}>
            <View>            
                <Text style={{fontSize: 20, fontWeight: 600, color: '#379777'}}>{place.displayName.text}</Text>
                <Text style={{marginTop: 5, color: '#45474B', fontWeight: 600, fontSize: 15}}>Total chargers: {place?.evChargeOptions?.connectorCount}</Text>
                <Text style={{marginVertical: 5, color: '#45474B', fontSize: 15}}>{place?.formattedAddress}</Text>
            </View>
            <Pressable onPress={() => onStartClick()}
                style={{backgroundColor: '#379777', alignItems: 'center', justifyContent: 'center', padding: 5, marginTop: 10, borderRadius: 5}}>
                <Text style={{color: 'white', fontSize: 18, fontWeight: 500}}>Start</Text>
            </Pressable>
        </View>
    </View>
  )
}

export default ItemList

const styles = StyleSheet.create({})