var address;
var latorigin;
var lngorigin;
var geocoder;
var map;
var destinations;
var apothekenArray;
var closestDrugStoresFound;

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    address=vars.location;
    return address;
}

function getgeocodeOrigin() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 51.1657, lng: 10.4515}
    });
    getUrlVars();
    geocoder = new google.maps.Geocoder();
    codeOriginAddress(geocoder, map);
}

function codeOriginAddress(geocoder, map) {
    geocoder.geocode({'address': address + " Germany"}, function(results, status) {
        if (status === 'OK') {
            map.setCenter(results[0].geometry.location);
            latorigin = results[0].geometry.location.lat();
            lngorigin = results[0].geometry.location.lng();
            readJSON();
            // var marker = new google.maps.Marker({
            //     map: map,
            //     position: results[0].geometry.location,
            //     title: address
            // });
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
}

function readJSON() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '../apo/apotheken.json', true);
    xhr.responseType = 'blob';

    xhr.onload = function (e) {
        if (this.status == 200) {
            //var file = new File([this.response], 'temp');
            var blob = new Blob([this.response], { type: 'application/json' });
            var fileReader = new FileReader();
            fileReader.addEventListener('load', function () {
                var jsonObj = JSON.parse(fileReader.result);
                parseAddressesFromJson(jsonObj);
            });
            fileReader.readAsText(blob);
        } else {
            console.log('error reading json');
        }
    };

    xhr.send();
}

function parseAddressesFromJson(file) {
    apothekenArray = file.Apotheken;
    destinations = file.Apotheken.map(function (obj) {
        return {
            PLZ: obj.PLZ,
            address: obj.Strasse + ", " + obj.PLZ + " " + obj.Ort,
            Einrichtung: obj.Einrichtung,
            latitudeOrigin: obj.Latitude,
            longitudeOrigin: obj.Longitude,
            distance: Math.sqrt(Math.pow((obj.Latitude - latorigin) * 71.44, 2) + Math.pow((obj.Longitude - lngorigin) * 111.13, 2))
        };
    });
    sortDestinations(destinations); //    filterPLZIfNeeded(destinations);
}

function sortDestinations(destinationsArr){
    var results = destinationsArr;
    results = destinationsArr.sort(function(a, b){
        return a.distance - b.distance;
    });
    destinations = results;
    getThreeClosestDrugStores();
}


function getThreeClosestDrugStores() {
    var closestDrugStores = destinations.slice(0, 3);
    var foundDrugStores = [];

    for (i = 0; i < closestDrugStores.length; i++) {
        var apotheke = apothekenArray.find(function (obj) {
            return obj.Einrichtung === closestDrugStores[i].Einrichtung && obj.PLZ == closestDrugStores[i].PLZ;
        });
        foundDrugStores.push(apotheke);
    }

    closestDrugStoresFound = foundDrugStores;
    initMap();
}

function showTextDataToUser(){
    var parentWrapper = document.getElementById("drugStoreWrapper");
    for (i = 0; i < closestDrugStoresFound.length; i++){
        var drugStore = closestDrugStoresFound[i];

        resultnumber = "<span style='padding-left: 8px; font-weight: bold; color: white;'>" + (i+1) + "</span></div>";
        mapPinDiv = "<div style = 'margin-right: 8px; padding-top: 3px; height: 40px; width: 25px; min-width: 25px; background-image: url(../images/marker_1.png); background-repeat: no-repeat; background-size: cover;'>";
        title = "<div id='apo_result_title_" + i + "' onClick='zoomOnMapTo(this.id)' style='display: flex; flex-flow: row; cursor: pointer;'>" + mapPinDiv + resultnumber + "<h3 style='font-size: 16px; font-weight: bold'>" + drugStore.Einrichtung + "</h3></div>";
        if (drugStore.isOpenNow) {
            openParag = "<p><span style='background-color: #53a24e;color: white; padding: 5px; border-radius: 10px;'>Geöffnet</span></p>";
        } else {
            openParag = "<p><span style='background-color: #ff5f5f; color: white; padding: 5px; border-radius: 10px;'>Geschlossen</span></p>";
        }
        addressParag = "<p style='font-size: 14px; margin-bottom:5px;'>" + drugStore.Strasse + "<br>" + drugStore.PLZ + " " + drugStore.Ort + "</p>";
        if (drugStore.phone) {
            phoneLink = "<p style= 'font-size : 14px; margin-bottom:5px;'><a href=tel:" + drugStore.phone + ">" + drugStore.phoneNumber + "</a></p>";
        } else {
            phoneLink = "";
        }
        if (drugStore.website) {
            websiteLink = "<p style= 'font-size: 14px; margin-bottom:5px;'><a href=" + drugStore.website + " target='_blank'>Webseite</a></p>";
        } else {
            websiteLink = "";
        }
        RoutenplanerLink = "<p style='font-size: 14px;'><a href='https://www.google.de/maps/dir/" + address + "/" + drugStore.Strasse + "+" + drugStore.PLZ + "+" + drugStore.Ort + "/' target='_blank'>Route planen</a></p>";

        document.getElementById('apo_result_'+i).innerHTML = title + openParag + addressParag + phoneLink + websiteLink + RoutenplanerLink;


    }
}

function zoomOnMapTo(clicked_id) {
    id = clicked_id.substring(clicked_id.length-1, clicked_id.length);
    map.setCenter(closestDrugStoresFound[id].location);
    map.setZoom(14, true);
    document.getElementById("map").scrollIntoView();
}

// LOAD MAP

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 51.1657, lng: 10.4515}
    });
    geocoder = new google.maps.Geocoder();
    codeAddress(geocoder, map);
}

function codeAddress(geocoder, map) {
    for (i = 0; i < closestDrugStoresFound.length; i++) {
        var apotheke = closestDrugStoresFound[i];
        var apoAddress = apotheke.Einrichtung + "," + apotheke.PLZ + " " + apotheke.Ort;
        getBasicMapInfo(apoAddress, i).then(function (data) {
            getDetailedMapInfo().then(function (_) {
                showTextDataToUser();
            });
        });
    }

    geocoder.geocode({
        'address': address + "Germany"
    }, function (results, status) {
        if (status === 'OK') {
            map.setCenter(results[0].geometry.location); // var marker = new google.maps.Marker({
            //     map: map,
            //     position: results[0].geometry.location,
            //     title: address
            // });
        } else {
            console.log('Geocode was not successful for the following reason: ' + status);
        }
    });
}

function getBasicMapInfo(apoAddress, i) {
    return new Promise(function (resolve, _reject) {
        var request = {
            query: apoAddress,
            fields: ['geometry', 'place_id']
        };
        var service = new google.maps.places.PlacesService(map);
        var markerNumber = (i + 1).toString();
        service.findPlaceFromQuery(request, function (results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                closestDrugStoresFound[i].place_id = results[0].place_id;
                closestDrugStoresFound[i].location = results[0].geometry.location;
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    animation: google.maps.Animation.DROP,
                    label: {
                        color: 'white',
                        fontWeight: 'bold',
                        text: markerNumber
                    }
                });

                if (closestDrugStoresFound[0].place_id && closestDrugStoresFound[1].place_id && closestDrugStoresFound[2].place_id) {
                    resolve();
                }
            }
        });
    });
}

function getDetailedMapInfo() {
    return new Promise(function (resolve, _reject) {
        var index = 0;
        closestDrugStoresFound.forEach(function (apotheke) {
            var request = {
                placeId: apotheke.place_id,
                fields: ['opening_hours', 'utc_offset_minutes', 'website', 'international_phone_number']
            };
            var service = new google.maps.places.PlacesService(map);
            service.getDetails(request, function (place, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    apotheke.isOpenNow = place.opening_hours.isOpen();
                    apotheke.website = place.website;
                    apotheke.phoneNumber = place.international_phone_number;
                    apotheke.phone = place.international_phone_number.replace(/\s/g, "");

                    if (index === closestDrugStoresFound.length - 1) {
                        resolve();
                    }

                    index += 1;
                }
            });
        });
    });
}

// HANDLE HTML

function createHTMLElement(tagName, props) {
    return Object.assign(document.createElement(tagName), (props || {}));
}

//append child function
function addChildHTML(parent, child) {
    if (child) parent.appendChild(child);
    return parent;
}