import { Image, StyleSheet, Text, View } from 'react-native';
import React, { useContext } from 'react';
import MapView, { Marker, PROVIDER_DEFAULT} from 'react-native-maps';
import { UserLocationContext } from '@/app/context/UserLocationContext';
import MarkerList from '../mapView/MarkerList';


const MapViewScreen = ({placeList}) => {
const {location, setLocation} = useContext(UserLocationContext)


  return location?.latitude &&(
    <View>
      <MapView style={{width: '100%', height: '100%'}} 
        provider={PROVIDER_DEFAULT} 
        region={{
          latitude: location?.latitude,
          longitude: location?.longitude,
          latitudeDelta: 0.2,
          longitudeDelta: 0.2
        }}
      >
        {location? <Marker coordinate={{latitude: location?.latitude, longitude: location?.longitude}}>
          <Image source={require('../../../assets/images/ev_images/car.png')} style={{width: 50, height: 50}}/>
        </Marker> : null}

        {placeList && placeList.map((item, index) => (
          <MarkerList key={index} place={item} index={index}/>
        ))}

      </MapView>
    </View>
  )
}

export default MapViewScreen

const styles = StyleSheet.create({})