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

import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';
import {updateAreas, sendArea} 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);

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

        this.state = {
            activeWalk: false,
            username: "samded",
            gameNumber: "samdum",
            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,
            activity: "map"
        };
    }

    componentDidMount() {
        setInterval(() => {
            this.updateCaptures();
        }, 5000);
    }

    updateCaptures(){
        updateAreas(this.state.gameNumber, (polygons) => {
            this.setState({
                captures: polygons
            })
        })
    }
    setGameNumber(user, number){
        this.setState({username: user, gameNumber: number})
    }
    
    startWalk(){
        console.log("starting walk")
        this.setState({walkMarkers: [], activeWalk: true})
    }

    stopWalk(){
        console.log("stopping walk")
        sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
        .then(data => {
            console.log(data);
            if (data != []) {
                this.takePicture(data.polygonID);
            }
        });
        this.setState({activeWalk: false})

    }

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

    takePicture = async function(polygonID) {
        if (this.camera) {
          const options = { quality: 0.5, base64: true };
          const data = await this.camera.takePictureAsync(options)
          console.log(data.uri);
          this.setState({activity: "map"});
        }
    };

    showCamera() {
        this.setState({activity: "takePicture"});
    }
    

    render() {
        
        let view = "";
        if (this.state.activity === "map") {
            view = 
            <View style ={{flex: 1}}>
                <MapView
                    showsUserLocation
                    style = {styles.map}
                    initialRegion={{
                        latitude: -43.5610623,
                        longitude: 172.5655853,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0.02,
                    }}

                >

                    <MapView.Polyline
                        coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
                        strokeWidth={5}
                        strokeColor={"rgb(148,0,211)"}
                    />
                    {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>
        } else if (this.state.activity === "takePicture") {
            view = <View style={styles.container}>
            <RNCamera
                ref={ref => {
                this.camera = ref;
                }}
                style = {styles.preview}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                permissionDialogTitle={'Permission to use camera'}
                permissionDialogMessage={'We need your permission to use your camera phone'}
                onGoogleVisionBarcodesDetected={({ barcodes }) => {
                console.log(barcodes)
                }}
            />
            <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
            <TouchableOpacity
                onPress={this.takePicture.bind(this)}
                style = {styles.capture}
            >
                <Text style={{fontSize: 14}}> SNAP </Text>
            </TouchableOpacity>
            </View>
        </View>
        }


        return view;
  }
}

const styles = StyleSheet.create({
    preview: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    capture: {
      flex: 0,
      backgroundColor: '#fff',
      borderRadius: 5,
      padding: 15,
      paddingHorizontal: 20,
      alignSelf: 'center',
      margin: 20
    },
    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,
  },
});