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';
import { Confirm } from './Confirm';


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,
    username = route.params.Username,
    I_username = route.params.I_Username,
    Confirm_Flag = route.params.Confirm_Flag,
    View_Only = route.params.View_Only
    } = route.params
    

    

  

  if(View_Only == true){

    const Retrive_pin = route.params.Pin;
    console.log("Retrieve lat", Retrive_pin)

    if(Confirm_Flag == true){
      const [pin2, setPin2] = React.useState({
        latitude: Retrive_pin[0].Pin[0],
        longitude: Retrive_pin[0].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 [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' color = "#000000" onPress = {() => navigation.navigate('StateTime' , {Pin : pin1 , Appointment : Appointment, int_id : int_id, 
                mapflag : mapflag, I_Token: i_token, U_Token: u_token
                ,Username: username, I_Username: I_username})}/>
          </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,
  },
});