import React from 'react';
import {
    View,
    StyleSheet,
    Text,
    PermissionsAndroid,
    Platform
} from 'react-native';
import MapView from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';
import PlaceInput from '../components/PlaceInput';


//const API_KEY = 'AIzaSyDwVK7iTyCi1liykASBPsaalapSSClq5a8';

class MapScreen extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            curLoc: null
        }
        this._requestUserLocation();
    }


    if (hasMapPermission) {
        Geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
            },
            (error) => {
                // See error code charts below.
                console.log(error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }

        );
        let curLoc = {
            userLatitude: position.coords.latitude,
            userLongitude: position.coords.longitude,
            latitudeDelta: 0.045,
            longitudeDelta: 0.045,
        }
        this.setState({curLoc : curLoc})
    }

    async _requestUserLocation(){
        try{
            if(Platform.OS === 'android'){
                const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
                if(granted === PermissionsAndroid.RESULTS.GRANTED){
                    this.setState({hasMapPermission: true})
                }else{
                    this.setState({hasMapPermission: false})
                }
            }
        } catch(err){
            console.warn(err);
        }
    }

    render(){
        return(
            <View style={styles.container}>
                <PlaceInput />
                <MapView
                    style={styles.map}
                    showsUserLocation
                    followsUserLocation
                    region={this.state.curLoc}

                />
            </View>
        );
    }
}

export default MapScreen;

const styles = StyleSheet.create({
    container:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        flex: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
})