import React from 'react';
import {
    TouchableWithoutFeedback,
    StyleSheet,
    Keyboard,
    PermissionsAndroid,
    Platform,
    View
} from 'react-native';

import TheMap from '../components/TheMap';
import PlaceInput from '../components/PlaceInput';
import axios from 'axios';
import PolyLine from '@mapbox/polyline';
import {Polyline} from 'react-native-maps'
import Geolocation from 'react-native-geolocation-service';


class MainMap extends React.Component{
    constructor(props){
        super(props);
        this.state={
            hasMapPermission: false,
            userLatitude: 0,
            userLongitude: 0,
            destinationCoords: []
        }
        this.showDirectionOnMap = this.showDirectionOnMap.bind(this);
    }

    componentDidMount(){
        this._requestUserLocation();
    }

    getUserLocation() {
        this.setState({hasMapPermission: true})
        Geolocation.watchPosition(
            (position) => {
                // let curLoc = {
                //     userLatitude: position.coords.latitude,
                //     userLongitude: position.coords.longitude,
                //     latitudeDelta: 0.045,
                //     longitudeDelta: 0.045,
                // }
                this.setState({
                    userLatitude: position.coords.latitude,
                    userLongitude: position.coords.longitude,
                })
                console.log(position);
            },
            (error) => {
                // See error code charts below.
                console.log(error.code, error.message);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }

        );

    }

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

    async showDirectionOnMap(placeId){
        const { userLatitude, userLongitude } = this.state;
        try{
            let result = await axios.get(
                `https://maps.googleapis.com/maps/api/directions/json?key=AIzaSyDV6GaU80hyu9abT6hgm5P5MFrbq9o8MaE&origin=${userLatitude},${userLongitude}&destination=place_id:${placeId}`
            );
            console.log(result.data);
            let points = PolyLine.decode(
                result.data.routes[0].overview_polyline.points
            )
            let latLng = points.map(point => ({
                latitude: point[0],
                longitude: point[1],
            }));
            this.setState({destinationCoords: latLng})
            console.log(latLng);
        } catch(err){
            console.error(err);
        }
    }

    hideKeyboard(){
        Keyboard.dismiss();
    }

    render(){
        let polyline = this.state.destinationCoords.length > 0
            ? ( <Polyline coordinates={this.state.destinationCoords}/> )
            : null;
        //if(this.state.hasMapPermission === true){
            return(
                <TouchableWithoutFeedback
                    onPress={this.hideKeyboard}
                >
                    <View style={styles.container}>
                        <PlaceInput
                            showDirectionOnMap={this.showDirectionOnMap}
                            userLatitude={this.state.userLatitude}
                            userLongitude={this.state.userLongitude}
                        />
                        <TheMap
                            userLatitude={this.state.userLatitude}
                            userLongitude={this.state.userLongitude}
                        >
                            {polyline}
                        </TheMap>
                    </View>
                </TouchableWithoutFeedback>
            )
        }
    }
//}

export default MainMap;

const styles = StyleSheet.create({
    container:{
        flex: 1
    }
})