import React, { Component } from 'react';
import sharedStyles from './shared-styles';
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';
import NewButton from "./components/new-button";
import JoinButton from "./components/join-button";
import CapturedArea from "./components/captured-area";
import RoomInput from "./components/room-input";
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);

         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({
                walkMarkers: [
                    ...this.state.walkMarkers, {
                        coordinate: position.coords,
                        key: id++
                    }
                ]
            });
        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
        this.state = {
            walkMarkers: [],
            captures: [
                new CapturedArea("fanded", [
                    {latitude: -43.5623, longitude:172.5655},
                    {latitude: -43.5623, longitude:172.5650},
                    {latitude: -43.5628, longitude:172.5650},
                    {latitude: -43.5628, longitude:172.5655}
                ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),

                new CapturedArea("samded", [
                    {latitude: -43.5663, longitude:172.5615},
                    {latitude: -43.5663, longitude:172.5610},
                    {latitude: -43.5668, longitude:172.5610},
                    {latitude: -43.5668, longitude:172.5615}
                ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
            ],
            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.walkMarkers.map((marker) => marker.coordinate)}
                        strokeWidth={5}
                    />
                    {this.state.captures.map((capture, i) => {
                        return <MapView.Polygon
                            key={i}
                            coordinates={capture.coordinates}
                            strokeWidth={2}
                            strokeColor={capture.strokeColor}
                            fillColor={capture.fillColor}
                        />
                        }
                    )
                    }
                </MapView>
                <RoomInput/>
                <View style={styles.menu}>
                
                    <View style={styles.new}>
                        <NewButton erase={() => {this.setState({walkMarkers: []})}}/>
                    </View>

                    <View style={styles.infoWrapper}>
                    
                        <JoinButton join={() => {}}/>
                        <JoinButton join={() => {}}/>
                        <JoinButton join={() => {}}/>
                        <JoinButton join={() => {}}/>
                    
                        
                    </View>
                </View>
           </View>
    );
  }
}

const styles = StyleSheet.create({
    infoWrapper: {
        // position: 'absolute',
        // left: 0,
        // bottom: 0,
        // right: 0,
        paddingVertical: 0,
        flexDirection: 'row',
        flex: 1
    },
    menu: {
        
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        flexDirection: 'column',
        flex: 1
    },
    new: {
        // position: 'absolute',
        // left: 0,
        // bottom: 60,
        // right: 0,
        paddingHorizontal: 10,
        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,
  },
});