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 {
        Day = route.params.Day ,
        Month = route.params.Month,
        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 , 
                    Day : Day, Month: Month, 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,
      },
    });