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} ) {
    
  console.log('In map params')
  console.log(route.params)
  

    
    const {
    Appointment = route.params.Appointment_Date ,
    int_id = route.params.int_id,
    mapflag = route.params.Flag, 
    i_token = route.params.I_Token,
    u_token =  route.params.U_Token,
    View_Only = route.params.View_Only
    } = route.params
    

    

  

  if(View_Only == true){

    const Retrive_pin = route.params.Pin;

  console.log("Retrieve lat", Retrive_pin.Pin[0])

  const [pin2, setPin2] = React.useState({
    latitude: Retrive_pin.Pin[0],
    longitude: Retrive_pin.Pin[1],
  })

  console.log("Pin2", pin2)
  
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          initialRegion={{
            latitude: pin2.latitude,
            longitude: pin2.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          provider="google"
        >
          <Marker coordinate={pin2} />
        </MapView>
      </View>
    );
  }
  else{

    const [pin1, setPin1] = 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,
          }}
          onPress={(e) => {
            setPin1({
              latitude: e.nativeEvent.coordinate.latitude,
              longitude: e.nativeEvent.coordinate.longitude
            })
          }}
          
          provider="google"
        >
          <Marker coordinate={pin1} />
        </MapView>
          <View style = {{position: 'absolute', bottom: '5%'}}>
              <Button title= 'Confirm Location' onPress = {() => navigation.navigate('StateTime' , {Pin : pin1 , Appointment : Appointment, int_id : int_id, mapflag : mapflag, I_Token: i_token, U_Token: u_token})}/>
          </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,
  },
});