import React, { Component } from 'react';
import { View } from 'native-base';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import styles from './TrackDriverStyles.js';

let timer;
const apikey ='AIzaSyCyKO1Ic3A9yty_Lyt8eWtkaQJSV9mNG30';
const driverLocation = driverLocation || {};
export default class MapTrack extends Component {

    constructor(props) {
        super(props);
        this.state = {
          posY:driverLocation.coordinate.coordinates[0],
          posX:driverLocation.coordinate.coordinates[1],
          posFinalX:driverLocation.coordinate.coordinates[1],
          posFinalY:driverLocation.coordinate.coordinates[0]
        };


      }

atualizar() {
    if(timer != null) {
      clearInterval(timer);
    }

    timer = setInterval(()=>{
      let state = this.state;

      if(state.posY < state.posFinalY) {
        state.posY += 2;
      }
      if(state.posY > state.posFinalY) {
        state.posY -= 2;
      }

      if(state.posX < state.posFinalX) {
        state.posX += 2;
      }
      if(state.posX > state.posFinalX) {
        state.posX -= 2;
      }

      this.setState(state);
    }, 10);
  }

  render() {
    return(
        <View style={styles.container}>
           <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={this.props.region}
                zoomEnabled={true}
                minZoomLevel={15}
           >

         { showCarMarker &&
             <MapView.Marker
                 coordinate={{latitude:this.state.posY, longitude:this.state.posX}}
                 image={carMarker}
             />
         }
         {bookingInfo &&
            <MapViewDirections
            origin={{latitude:this.props.bookingInfo.pickUp.latitude, longitude:this.props.bookingInfo.pickUp.longitude}}
            destination={{latitude:this.props.bookingInfo.dropOff.latitude, longitude:this.props.bookingInfo.dropOff.longitude}}
            apikey={apikey}
            strokeWidth={4}
            strokeColor="black"
            mode="driving"
            />
         }
           </MapView>
        </View>
    );

    }
}