import * as React from 'react';
import { useState } from 'react';
import MapView, { Marker } from 'react-native-maps';
import { Button, StyleSheet, Text, View, Dimensions, Pressable } from 'react-native';


export default function Map({route, navigation} ) {

    
    const {
    Appointment = route.params.Appointment_Date ,
    int_id = route.params.int_id,
    mapflag = route.params.Flag 
    } = route.params
    

    console.log('In map params')
    console.log(route.params)

  const [pin, setPin] = React.useState({
    latitude: 18.4655,
    longitude: -66.1057,
  })

  
  return (
    <View style={styles.container}>
      <MapView style={styles.map}
        initialRegion={{
          latitude: 18.4655,
          longitude: -66.1057,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        onLongPress={(e) => {
          setPin({
            latitude: e.nativeEvent.coordinate.latitude,
            longitude: e.nativeEvent.coordinate.longitude
          })}}
        provider="google"
      >
        <Marker coordinate={pin} />
      </MapView>
        <View style = {{position: 'absolute', bottom: '5%'}}>
            <Button title= 'Confirm Location' onPress = {() => navigation.navigate('StateTime' , {Pin : pin , Appointment : Appointment, int_id : int_id, mapflag : mapflag})}/>
        </View>
    </View>
  );

    
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  container2: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#307ecc',
    padding: 16,
  },
});