import React, { Component } from 'react';
import sharedStyles from './shared-styles';
import {
    Platform,
    StyleSheet,
    Image,
    ListView,
    Text,
    ScrollView,
    TextInput,
    TouchableHighlight,
    View,
    Modal
} from 'react-native';

import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';
import {updateAreas} from './update-map'
import MapView from 'react-native-maps';
import WalkButton 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.updateCaptures();
        }, 5000);

        let watchID = navigator.geolocation.watchPosition((position) => {
            this.setState({
                walkMarkers: [
                    ...this.state.walkMarkers, {
                        coordinate: position.coords,
                        key: id++
                    }
                ]
            });
        }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});

        this.state = {
            activeWalk: false,
            username: "",
            gameNumber: "",
            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 
        };
    }
    updateCaptures(){
        updateAreas(this.state.gameNumber, (polygons) => {
            this.setState({
                captures: polygons
            })
        })
    }
    setGameNumber(user, number){
        this.setState({username: user, gameNumber: number})
    }
    
    startWalk(){
        this.setState({walkMarkers: [], activeWalk: true})
    }

    stopWalk(){
        this.setState({activeWalk: false})
    }

    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>
                <Text style={styles.gameNumber}>
                    {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
                
                </Text>

                <RoomInput 
                    ref={instance => this.roomInputModal = instance}
                    join={(user, number) => this.setGameNumber(user, number)}/>
                <View style={styles.menu}>
                
                    <View style={styles.walk}>
                        <WalkButton 
                            start={() => {this.startWalk()}}
                            stop={() => {this.stopWalk()}}
                            />
                    </View>

                    <View style={styles.infoWrapper}>
                        <JoinButton 
                            modal={() => this.roomInputModal.setModalVisible(true)}/>
                    </View>
                </View>
           </View>
    );
  }
}

const styles = StyleSheet.create({
    infoWrapper: {
        paddingVertical: 0,
        flexDirection: 'row',
        flex: 1
    },
    menu: {
        
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        flexDirection: 'column',
        flex: 1
    },
    walk: {
        // position: 'absolute',
        // left: 0,
        // bottom: 60,
        // right: 0,
        paddingHorizontal: 10,
        flexDirection: 'row',
        flex: 1
    },
    modal:{
        backgroundColor: 'white',
        margin: 0, // This is the important style you need to set
        alignItems: undefined,
        justifyContent: undefined,
    },
    map: {
        ...StyleSheet.absoluteFillObject
    },
    gameNumber:{
        fontSize: 30,
    },

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