import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text,
         View, Dimensions, Image} from 'react-native';
import MapView from 'react-native-maps';
import * as firebase from 'firebase';

var {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.005
const LONGTITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

class Map extends Component {
    constructor(props) {
        super(props);

        this.state = {
            initialPosition: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0,
                longitudeDelta: 0
            },
            markerPosition: {
                latitude: 0,
                longitude: 0
            },
            carPosition: {
                lat: 1,
                lon: 1
            },
            time: '',
            date: ''
        }
    }
    //watchID: ?number = null

    componentWillMount() {
        var firebaseConfig = {
          apiKey: 'AIzaSyAYDjR3JkdXWpb8xmYZiJrnpUjYQoQXHRA',
          authDomain: "reactnativedata.firebase.com",
          databaseURL: "https://reactnativedata.firebaseio.com",
          projectId: "reactnativedata",
          storageBucket: "",
          messagingSenderId: ""
        };

        firebase.initializeApp(firebaseConfig);

        var postDate= this.state.date;
        var postTime= this.state.time;
    }

    componentDidMount() {


        this._interval = setInterval( () => {

        navigator.geolocation.getCurrentPosition((position) => {
            var lat = parseFloat(position.coords.latitude)
            var long = parseFloat(position.coords.longitude)

            var initialRegion={
                latitude: lat,
                longitude: long,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGTITUDE_DELTA
            }

            this.setState({initialPosition: initialRegion})
            this.setState({markerPosition: initialRegion})
        },
        (error) => alert(JSON.stringify(error)),
        {enableHighAccuracy: true, timeout: 20000, maximumAge:10000})

        }, 5000);

        // this.watchID = navigator.geolocation.watchPosition((position) => {
        //     var lat = parseFloat(position.coords.latitude)
        //     var long = parseFloat(position.coords.longitude)
        //     var lastRegion = {
        //         latitude: lat,
        //         longitude: long,
        //         latitudeDelta: LATITUDE_DELTA,
        //         longitudeDelta: LONGTITUDE_DELTA
        //     }
        //     this.setState({initialPosition: lastRegion})
        //     this.setState({markerPosition: lastRegion})
        // },
        // (error) => alert(error.message),
        // { enableHighAccuracy: false, timeout: 5000, maximumAge: 1000, distanceFilter: 1 }
        // )

        this.Clock = setInterval( () => this.GetTime(), 1000 );
        this.Clock = setInterval( () => this.GetDate(), 1000 );
        this.Clock = setInterval( () => this.upFirebase(), 1000 );
        this.Clock = setInterval( () => this.getFirebase(), 1000 );
    }

    componentWillUnmount() {
        //navigator.geolocation.clearWatch(this.watchID)
        clearInterval(this._interval);
        clearInterval(this.Clock);
    }

    GetDate() {
        var date, day, month, year, fullDate;
        date = new Date();
        day = date.getDate();
        if(day < 10)
            {
              day = '0' + day.toString();
            }
        month = date.getMonth()+1;
        if(month < 10)
            {
              month = '0' + month.toString();
            }
        year = date.getFullYear();
        fullDate = month.toString() + day.toString() + year.toString();

        this.setState({
          date: fullDate
        });
    }

    getFirebase() {
    firebase.database().ref(this.state.date + '/ASS/' + '19:46:53').once('value', (snapshot) => {
        this.setState({ carPosition: snapshot.val() })
        });
    }

    upFirebase() {
    firebase.database().ref(this.state.date + '/ASS/' + this.state.time).set({
            lat: this.state.markerPosition.latitude,
            lon: this.state.markerPosition.longitude
        })
    }

    GetTime() {
        var date, TimeType, hour, minutes, seconds, fullTime;
        date = new Date();
        hour = date.getHours();
        if(hour < 10)
            {
              hour = '0' + hour.toString();
            }
        minutes = date.getMinutes();
        if(minutes < 10)
            {
              minutes = '0' + minutes.toString();
            }
        seconds = date.getSeconds();
        if(seconds < 10)
            {
              seconds = '0' + seconds.toString();
            }
        fullTime = hour.toString() + ':' + minutes.toString() + ':' + seconds.toString();

        this.setState({
          time: fullTime
        });
    }

    render() {
        return (
            <View style={styles.container}>


                <Text>{this.state.time}</Text>
                <Text>{this.state.date}</Text>
                <Text>{this.state.carPosition.lat}</Text>
                <Text>{this.state.carPosition.lon}</Text>


            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },


});

export default Map;