var map;

class MapaKML {
    loadMap() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = `http://maps.google.com/maps/api/js?key=AIzaSyDHCLIaV3Ej91HUbW0Bjb8vmFRPUSFYN8w&sensor=false&callback=MapMakerObj.pointAt`;
        document.body.appendChild(script);
    }
}

class MapMaker {
    constructor() {
        this.lat = 43.3625;
        this.lon = -5.850278;
    }
    pointAt() {
        var center = { lat: this.lat, lng: this.lon };
        map = new google.maps.Map(document.getElementById('map'), {
            center: center,
            zoom: 16
        });


    }
}

class Helper {
    readFiles(event) {
        var fileList = event.target.files;

        for (var i = 0; i < fileList.length; i++) {
            this.loadAsText(fileList[i]);
        }
    }

    loadAsText(theFile) {
        var reader = new FileReader();

        reader.onload = function (loadedEvent) {
            // result contains loaded file.
            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(loadedEvent.target.result, "text/xml");
            var document = xmlDoc.getElementsByTagName("kml")[0].getElementsByTagName("Document")[0];
            var placeMarks = document.getElementsByTagName("Placemark");

            for (var i = 0; i < placeMarks.length; i++) {
                //<Style id="yellowLineGreenPoly"><LineStyle><color>
                var color = document.getElementsByTagName("Style")[0].getElementsByTagName("LineStyle")[0].getElementsByTagName("color")[0].textContent;
                var width = document.getElementsByTagName("Style")[0].getElementsByTagName("LineStyle")[0].getElementsByTagName("width")[0].textContent;
                var coords = document.getElementsByTagName("coordinates")[0].textContent;
                var coordLines = coords.split("\n");

                var flightPlanCoordinates = [];

                coordLines.forEach(function (c) {
                    var coordVals = c.split(",");

                    var marker = new google.maps.Marker({ position: { lat: parseFloat(coordVals[1]), lng: parseFloat(coordVals[0]) }, map: map, title: "" });
                    flightPlanCoordinates.push({lat: parseFloat(coordVals[1]), lng: parseFloat(coordVals[0])});
                });

                console.log(color);

                var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    geodesic: true,
                    strokeColor: "#"+color,
                    strokeOpacity: 1.0,
                    strokeWeight: parseFloat(width)
                  });

                  flightPath.setMap(map);

            }

        }

        reader.readAsText(theFile);

    }
}

var HelperObj = new Helper();
var MapMakerObj = new MapMaker();
var MapaKMLObj = new MapaKML();