MarkerMap

import React, { Component } from 'react';
import * as routes from '../constants/routes';
import { Link } from 'react-router-dom';
import { auth, db } from './../firebase';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';
import '../stylesheets/Map.css';
import 'font-awesome/css/font-awesome.min.css';
import { ucs2 } from 'punycode';



const INITIAL_STATE = {
    email: '',
    cidade: 'campos-dos-goytacazes',
    latitude: null,
    longitude: null,
    prevLatitude: null,
    prevLongitude: null,
    itinerario: '',
    timestamp: null,
    map: null,
    marker: null,
    google: null,
    count: 0,
    error: null
}

const byPropKey = (propertyName, value) => () => ({
    [propertyName]: value,
});


class MapShare extends Component {

    constructor(props) {
        super(props);
        this.state = { ...INITIAL_STATE }
        this.createShare = this.createShare.bind(this);
        this.geoLocation = this.geoLocation.bind(this);

    }

    componentWillMount() {

        let positionItinerario = window.location.pathname.split('/')[3]
        this.geoLocation();
        this.setState({ email: auth.getUser().email, itinerario: positionItinerario })
    }



    componentDidUpdate(prevProps, prevState) {
        const {
            email,
            cidade,
            latitude,
            longitude,
            itinerario,
        } = prevState;


        if (this.state.latitude != null && this.state.longitude != null) {

            if (prevState.latitude !== this.state.latitude || prevState.longitude !== this.state.longitude) {
                this.setState({ prevLatitude: prevState.latitude, prevLongitude: prevState.longitude });
                if (this.state.map !== null) {
                    setTimeout(() => {
                        let positionTimestamp = new Date().getTime();
                        this.setState({ email, cidade, latitude, longitude, itinerario });
                        this.createShare(email, cidade, latitude, longitude, itinerario, positionTimestamp);

                    }, 10000);

                }
            }

        }
    }

    componentWillUpdate() {
        // vê se aqui tem o marker
    }



    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchId);
    }


    geoLocation() {
        if (!navigator.geolocation) {
            this.setState({ error: 'Infelizmente o seu navegador que você está utilizando não suporta geolocalização.' })
        } else {
            this.watchId = navigator.geolocation.watchPosition(
                (position) => {
                    this.setState({ latitude: position.coords.latitude, longitude: position.coords.longitude });
                },
                (error) => this.setState({
                    error: error.message
                }), {
                    enableHighAccuracy: true
                },
            );

        }
    }
    
    transitionCallLatitudeNotNull(){

        const {
            latitude,
            longitude,
            prevLatitude,
            prevLongitude
        } = this.state;

        if(latitude !== prevLatitude && longitude !== prevLongitude){
                 this.transition();
                 console.log("Latitude: ",latitude);
        }

    }



    createShare(email, cidade, latitude, longitude, itinerario, timestamp) {
        db.doCreateShareLocation(email, cidade, latitude, longitude, itinerario, timestamp)
            .then((success) => {
                this.setState({ email, cidade, latitude, longitude, itinerario, timestamp });
            })
            .catch(error => {
                this.setState((byPropKey('error', error)))
            })
    }



    markers(google, maps) {

        const {
            latitude,
            longitude
        } = this.state;

        let LatLng = { lat: latitude, lng: longitude };
        let marker = undefined;

        if (maps !== undefined && this.state.marker === null) {
            let map = maps.map;
            marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                draggable: true,
                title: 'Hello World!'
            });
            if (map !== undefined && this.state.map === null) {
                console.log("O valor está sendo setState()");
                console.log("Lat: ", latitude);
                console.log("Lng: ", longitude);
                this.setState({ map, marker, google });
            }

        }

    }


    transition() {
        let numberDeltas = 100;
        let deltaLatitude;
        let deltaLongitude;
    


        console.log("this.state.latitude: ", this.state.latitude);
        console.log("this.state.longitude: ", this.state.longitude);
        console.log("this.state.prevLatitude: ", this.state.prevLatitude);
        console.log("this.state.prevLongitude: ", this.state.prevLongitude);

        deltaLatitude = (this.state.latitude - this.state.prevLatitude) / numberDeltas;
        deltaLongitude = (this.state.longitude - this.state.prevLongitude) / numberDeltas;
    
        console.log("deltaLatitude: ", deltaLatitude);
        console.log("deltaLongitude: ", deltaLongitude);
        this.moveMarker(deltaLatitude, deltaLongitude, this.state.prevLatitude, this.state.prevLongitude, numberDeltas);
    }

    moveMarker(deltaLatitude, deltaLongitude, prevLatitude, prevLongitude, numberDeltas) {

        let delay = 10; //milliseconds
        let index = 0;

        prevLatitude += deltaLatitude;
        prevLongitude += deltaLongitude;
        
        console.log("prevLatitude: ", prevLatitude);
        console.log("prevLongitude: ", prevLongitude);
        let count = this.state.count + 1;
        this.setState({ count })
        console.log("Count: ", this.state.count);
        let latLong = new this.state.google.maps.LatLng(prevLatitude, prevLongitude);
        console.log("latLong: ", latLong);
        this.state.marker.setPosition(latLong);
        if (index != numberDeltas) {
            console.log("Index: ",index);
            index++;
            setTimeout(this.moveMarker(deltaLatitude, deltaLongitude, prevLatitude, prevLongitude, numberDeltas), delay)
        }
    }


    render() {
        const {
            latitude,
            longitude,
            showingInfoWindow,
            activeMarker,
            selectedPlace
        } = this.state;

        const { google } = this.props;
        if(google)
            return (
                <Map
                    google={google}
                    id={'map'}
                    zoom={16}
                    center={{
                        lat: latitude,
                        lng: longitude
                    }}
                    ref="googleMaps"

                >

                    {
                        google

                            ?

                            this.markers(google, this.refs.googleMaps)

                            : 
                            
                            <Marker
                                position={
                                    {
                                        lat: latitude,
                                        lng: longitude
                                    }
                                }
                                icon={{
                                    url: require('../images/person.png')
                                }}
                            />

                    }



                    <div className="mensagem-map-share">
                        Por favor, não saia do aplicativo, pois caso tente minimzar, perderemos sua localização. :(
                </div>


                    <a href="javascript:void(0)" className="float" id="menu-share">
                        <i className="fa fa-share my-float"></i>
                    </a>

                    <ul className="fab">

                        <li>
                            <a onClick={auth.doSignOut}>
                                <i className="fa fa-sign-out my-float"></i>
                            </a>
                            <div className="label-container">
                                <div className="label-text">Sair</div>
                            </div>
                        </li>

                        <li>
                            <a href="https://www.facebook.com/meuonibusBR" rel="noopener noreferrer" target="_blank">
                                <i className="fa fa-facebook my-float"></i>
                            </a>
                            <div className="label-container">
                                <div className="label-text">Facebook</div>
                            </div>
                        </li>
                        <li>
                            <Link to={routes.SEARCH_BUS}>
                                <i className="fa fa-undo my-float"></i>
                            </Link>
                            <div className="label-container">
                                <div className="label-text">Voltar</div>
                                <i className="fa fa-play label-arrow"></i>
                            </div>
                        </li>
                        <li>
                            <a href="">
                                <i className="fa fa-map-marker my-float"></i>
                            </a>
                            <div className="label-container">
                                <div className="label-text">Ponto de Ônibus</div>
                                <i className="fa fa-play label-arrow"></i>
                            </div>
                        </li>
                    </ul>

                </Map>

            );

            return(
                <h1>CARREGANDO...</h1>
            );
    }
}


export default GoogleApiWrapper({
    apiKey: (process.env.REACT_APP_API_MAP)
})(MapShare);