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} 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);
    // }
    takePicture = async function() {
        if (this.camera) {
          const options = { quality: 0.5, base64: true };
          const data = await this.camera.takePictureAsync(options)
          console.log(data.uri);
        }
    };
    

    render() {
        
        return (
            <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>
      
        //     <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({
    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,
  },
});