import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Image,
    ListView,
    Text,
    ScrollView,
    TextInput,
    TouchableHighlight,
    View
} from 'react-native';

import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';

import MapView from 'react-native-maps';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
let id = 0;
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = { markers: [] };



         setInterval(() => {
            this.distanceInfo.setState({value: Math.random() * 100});
            this.speedInfo.setState({value: Math.random() * 15});
            this.directionInfo.setState({value: this.directionInfo.state === 'N' ? 'NW' : 'N'});
        }, 1000);

        let watchID = navigator.geolocation.watchPosition((position) => {
            this.setState({
                markers: [
                    ...this.state.markers, {
                        coordinate: position.coords,
                        key: id++
                    }
                ]
            }, null, {distanceFilter: 1});
        });
        this.state = {markers: [], watchID };
    }

    componentWillUnmount() {
        navigator.geolocation.stopWatch(this.state.watchID);
    }

    render() {

        return (
            <View style ={{flex: 1}}>
                <MapView
                    showsUserLocation
                    style = {styles.map}
                    initialRegion={{
                        latitude: -43.5610623,
                        longitude: 172.5655853,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0.02,
                    }}
                    // onRegionChange = {(region)=> this.addMarker((region))}
                >
                    <MapView.Polyline
                        coordinates={this.state.markers.map((marker) => marker.coordinate)}
                        strokeWidth={5}
                    />
                    {/*{this.state.markers.map((marker) => (*/}
                        {/*<MapView.Marker coordinate = {marker.coordinate} key={marker.key} />*/}
                    {/*))}*/}
                </MapView>


               <View style={styles.infoWrapper}>

                   <RunInfoNumeric title = "Distance"
                                   unit="km"
                                   ref={(info) => this.distanceInfo = info}
                   />
                   <RunInfoNumeric title = "Speed"
                                   unit="km/h"
                                   ref={(info) => this.speedInfo = info}
                   />
                   <RunInfo title = "Direction"
                            value = "NE"
                            ref={(info) => this.directionInfo = info}
                   />
               </View>
           </View>
    );
  }
}

const styles = StyleSheet.create({
    infoWrapper: {
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        flexDirection: 'row',
        flex: 1
    },
    map: {
        ...StyleSheet.absoluteFillObject
    },

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});