//'use strict';

//import { Globe } from '../../src/og/Globe.js';
//import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
//import { BilTerrain } from '../../src/og/terrain/BilTerrain.js';
//import { MapboxTerrain } from '../../src/og/terrain/MapboxTerrain.js';
//import { EmptyTerrain } from '../../src/og/terrain/EmptyTerrain.js';
//import { XYZ } from '../../src/og/layer/XYZ.js';
//import { WMS } from '../../src/og/layer/WMS.js';
import { CanvasTiles } from "../../src/og/layer/CanvasTiles.js";
//import { Vector } from '../../src/og/layer/Vector.js';
//import { Entity } from '../../src/og/entity/Entity.js';
import { DebugInfo } from "../../src/og/control/DebugInfo.js";
//import { KeyboardNavigation } from '../../src/og/control/KeyboardNavigation.js';
import { ToggleWireframe } from "../../src/og/control/ToggleWireframe.js";
//import * as math from '../../src/og/math.js';
//import { LayerSwitcher } from '../../src/og/control/LayerSwitcher.js';
//import { Popup } from '../../src/og/Popup.js';
//import { LonLat } from '../../src/og/LonLat.js';
//import { Vec3 } from '../../src/og/math/Vec3.js';
//import { ScaleControl } from '../../src/og/control/ScaleControl.js';
//import { stringTemplate } from '../../src/og/utils/shared.js';
//import { SegmentBoundVisualization } from '../../src/og/control/SegmentBoundVisualization.js';

//function toQuadKey(x, y, z) {
//    var index = '';
//    for (var i = z; i > 0; i--) {
//        var b = 0;
//        var mask = 1 << (i - 1);
//        if ((x & mask) !== 0) b++;
//        if ((y & mask) !== 0) b += 2;
//        index += b.toString();
//    }
//    return index;
//};

//let bing = new XYZ("sat", {
//    shininess: 20,
//    isBaseLayer: false,
//    subdomains: ['t0', 't1', 't2', 't3'],
//    url: "https://ecn.{s}.tiles.virtualearth.net/tiles/a{quad}.jpeg?n=z&g=7146",
//    visibility: true,
//    attribution: `Bing`,
//    maxNativeZoom: 19,
//    defaultTextures: [{ color: "#001522" }, { color: "#E4E6F3" }],
//    urlRewrite: function (s, u) {
//        return stringTemplate(u, {
//            's': this._getSubdomain(),
//            'quad': toQuadKey(s.tileX, s.tileY, s.tileZoom)
//        });
//    }
//});

//// document.getElementById("ambient-r").addEventListener("input", function (e) {
////     osm.ambient.x = this.value;
////     document.querySelector(".value.ambient-r").innerHTML = this.value;
//// });
//// document.getElementById("ambient-g").addEventListener("input", function (e) {
////     osm.ambient.y = this.value;
////     document.querySelector(".value.ambient-g").innerHTML = this.value;
//// });
//// document.getElementById("ambient-b").addEventListener("input", function (e) {
////     osm.ambient.z = this.value;
////     document.querySelector(".value.ambient-b").innerHTML = this.value;
//// });

//// document.getElementById("diffuse-r").addEventListener("input", function (e) {
////     osm.diffuse.x = this.value;
////     document.querySelector(".value.diffuse-r").innerHTML = this.value;
//// });
//// document.getElementById("diffuse-g").addEventListener("input", function (e) {
////     osm.diffuse.y = this.value;
////     document.querySelector(".value.diffuse-g").innerHTML = this.value;
//// });
//// document.getElementById("diffuse-b").addEventListener("input", function (e) {
////     osm.diffuse.z = this.value;
////     document.querySelector(".value.diffuse-b").innerHTML = this.value;
//// });

//// document.getElementById("specular-r").addEventListener("input", function (e) {
////     osm.specular.x = this.value;
////     document.querySelector(".value.specular-r").innerHTML = this.value;
//// });
//// document.getElementById("specular-g").addEventListener("input", function (e) {
////     osm.specular.y = this.value;
////     document.querySelector(".value.specular-g").innerHTML = this.value;
//// });
//// document.getElementById("specular-b").addEventListener("input", function (e) {
////     osm.specular.z = this.value;
////     document.querySelector(".value.specular-b").innerHTML = this.value;
//// });

//// document.getElementById("shininess").addEventListener("input", function (e) {
////     osm.shininess = this.value;
////     document.querySelector(".value.shininess").innerHTML = this.value;
//// });

let cnv = document.createElement("canvas");
let ctx = cnv.getContext("2d");
cnv.width = 256;
cnv.height = 256;

const tg = new CanvasTiles("Tile grid", {
    visibility: true,
    isBaseLayer: false,
    zIndex: 100,
    drawTile: function (material, applyCanvas) {
        //Clear canvas
        ctx.clearRect(0, 0, cnv.width, cnv.height);

        //Draw border
        ctx.beginPath();
        ctx.rect(0, 0, cnv.width, cnv.height);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "black";
        ctx.stroke();

        let size;

        //Draw text
        if (material.segment.tileZoom > 17) {
            size = "18";
        } else if (material.segment.tileZoom > 14) {
            size = "26";
        } else {
            size = "32";
        }
        ctx.fillStyle = "black";
        ctx.font = "normal " + size + "px Verdana";
        ctx.textAlign = "center";
        ctx.fillText(
            material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom,
            cnv.width / 2,
            cnv.height / 2
        );

        //Draw canvas tile
        applyCanvas(cnv);
    }
});

//let osm = new XYZ("OSM", {
//    'isBaseLayer': true,
//    'url': "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
//    'visibility': true,
//    'attribution': 'Data @ OpenStreetMap contributors, ODbL'
//});

////let wien = new XYZ("512", {
////    'isBaseLayer': true,
////    'url': "//maps.wien.gv.at/basemap/bmaphidpi/normal/google3857/{z}/{y}/{x}.jpeg",
////    'visibility': false
////});

////let sat = new XYZ("MapQuest Satellite", {
////    shininess: 20,
////    specular: [0.00048, 0.00037, 0.00035],
////    diffuse: [0.88, 0.85, 0.8],
////    ambient: [0.15, 0.1, 0.23],
////    isBaseLayer: true,
////    url: "//api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
////    visibility: false,
////    attribution: `@2014 MapQuest - Portions @2014 "Map data @
////        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
////        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
////});

//let sat = new XYZ("Google Satellite", {
//    shininess: 20,
//    specular: [0.00048, 0.00037, 0.00035],
//    diffuse: [0.88, 0.85, 0.8],
//    ambient: [0.15, 0.1, 0.23],
//    isBaseLayer: true,
//    url: "https://khms1.googleapis.com/kh?v=894&hl=en-GB&x={x}&y={y}&z={z}",
//    visibility: false,
//    attribution: ``
//});

//let thames = new XYZ("Reconstructed Lakebed", {
//    fading: true,
//    isBaseLayer: false,
//    visibility: true,
//    url: "http://alacst.ddns.net:8181/Tiles/1xoverlay/{z}/{x}/{y}.png",
//    // extent: [[-1.1210868226, 51.5993282113], [-1.11506810397, 51.6072360341]]
//    extent: [[-1.12047, 51.60076], [-1.11807, 51.60285]]
//});

//let emptyTerrain = new EmptyTerrain(),
//    globusTerrain = new GlobusTerrain(),
//    mapboxTerrain = new MapboxTerrain(),
//    bilTerrain = new BilTerrain({
//        maxZoom: 19,
//        url: "//127.0.0.1:8080/geoserver/",
//        //url: "//95.211.82.211:8080/geoserver/og/",
//        //layers: "og:n44_e009_1arc_v3",
//        layers: "test:geotiff_coverage_2",
//        //layers: "arizona:3",
//        //imageSize: 129,
//        gridSizeByZoom: [64, 16, 16, 16, 16, 16, 16, 16, 16, 16, 32, 16, 32, 16, 32, 16, 32, 16, 32, 16, 8, 4],
//        //extent: [[8.9, 44.0], [10.0, 45]]
//    });

//window.globe = new Globe({
//    'name': "Earth",
//    'target': "earth",
//    'terrain': /*bilTerrain/*/globusTerrain/*new MapboxTerrain(null, {
//        url: "//alacst.ddns.net:8181/Tiles/testtile129/{z}/{x}/{y}.png",
//        //url: "//alacst.ddns.net:8181/Tiles/129terrain/{z}/{x}/{y}.png",
//        minZoom: 9,
//        maxZoom: 23,
//        gridSizeByZoom: [64, 32, 32, 16, 16, 16, 16, 32, 64, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 64, 32, 16],
//        sourceImageSize: 129,
//        equalizeVertices: false
//    })*/,
//    'layers': [osm, tg, sat],
//    'viewExtent': [89.83484, 25.69255, 90.34796, 26.44652]
//});

//window.setEmptyTerrain = function () {
//    window.globe.planet.setTerrain(emptyTerrain);
//};

//window.setOpenglobusTerrain = function () {
//    window.globe.planet.setTerrain(globusTerrain);
//};

//window.setBilTerrain = function () {
//    window.globe.planet.setTerrain(bilTerrain);
//};

//window.setMapboxTerrain = function () {
//    window.globe.planet.setTerrain(mapboxTerrain);
//};

////window.globe = new Globe({
////    'name': "Earth",
////    'target': "earth",
////    'terrain': new GlobusTerrain(),
////    'layers': [osm, sat, tg, states, modis],
////    'viewExtent': [7.86, 44.24, 11.29, 45.0]
////});

////window.globe = new Globe({
////    target: "earth",
////    name: "Bil Terrain Source",
////    terrain: new BilTerrain({
////        url: "//95.211.82.211:8080/geoserver/og/",
////        layers: "og:n44_e009_1arc_v3",
////        imageSize: 128,
////        gridSizeByZoom: [128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 64, 64, 32, 32, 32, 16, 8],
////        extent: [[8.9, 44.0], [10.0, 45]]
////    }),
////    viewExtent: [7.86, 44.24, 11.29, 45.0],
////    layers: [osm, sat, tg, states, modis]
////});

////globe.planet.addControl(new SegmentBoundVisualization());
//globe.planet.addControl(new KeyboardNavigation());
//globe.planet.addControl(new LayerSwitcher());
////globe.planet.addControl(new ScaleControl());

//let e1 = new Entity({
//    'name': 'strip1',
//    'strip': {
//        'color': [0 / 255, 38 / 255, 255 / 255],
//        'opacity': 0.27,
//        'path': [
//            [[586523.0151173624, 4392830.957760274, 4570544.574074627], [587043.0890180465, 4396726.110503412, 4574597.306676116]],
//            [[693687.4135420445, 4446600.854589337, 4502800.243641092], [694306.9328021071, 4450572.030680254, 4506821.6103556845]],
//            [[695057.6327224943, 4446368.161289945, 4502875.06522507], [695283.9105581088, 4447815.688108607, 4504340.988014539]],
//            [[695379.6262299116, 4446451.841945512, 4502776.850023308], [695603.3364033864, 4447882.307370998, 4504225.435734251]]
//        ],
//    }
//});

//let e2 = new Entity({
//    'name': 'strip2',
//    'strip': {
//        'color': [0 / 255, 38 / 255, 255 / 255],
//        'opacity': 0.27,
//        'path': [
//            [[661936.3048841777, 4745603.382222995, 4189411.525681237], [1339051.734436527, 9600030.082993329, 8474892.113242555]],
//            [[1126928.1072783293, 4760811.647727539, 4071007.90108061], [2277324.752646721, 9620768.297494425, 8226795.481871399]]
//        ],
//    }
//});

//let stripLayer = new Vector("test layer", {
//    'entities': [e1, e2],
//    'pickingEnabled': true,
//    'visibility': true
//});

//globe.planet.addLayer(stripLayer);

////new Vector("Markers", {
////    clampToGround: false,
////    polygonOffsetUnits: 0
////})
////    .addTo(globe.planet)
////    .add(new Entity({
////        lonlat: [5.73, 45.183, 273.5],
////        label: {
////            text: "Hi, Globus!",
////            outline: 0.77,
////            outlineColor: "rgba(255,255,255,.4)",
////            size: 27,
////            color: "black",
////            face: "Lucida Console",
////            offset: [10, -2]
////        },
////        billboard: {
////            src: "./marker.png",
////            width: 64,
////            height: 64,
////            offset: [0, 32]
////        }
////    }));

////globe.planet.viewExtentArr([-1.13284, 51.59951, -1.10951, 51.60386]);

////let myPopup = new Popup({
////    planet: globe.planet,
////    content: `Simple HTML popup<br>See <a href="//openglobus.org/examples/billboardsOnTHeGround/billboardsOnTHeGround.html">popup example</a>`,
////    offset: [0, 0],
////    lonLat: [5.73, 45.183, 273.5],
////    visibility: true
////});

////window.myPopup = myPopup;

////globe.planet.viewLonLat(new LonLat(-112.99778159686288, 37.23755430287543, 8952.673764926381));

////import { Globe } from '../../src/og/Globe.js';
////import { XYZ } from '../../src/og/layer/XYZ.js';
////import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
////import { Vec3 } from '../../src/og/math/Vec3.js';
////import { LonLat } from '../../src/og/LonLat.js';
////import { Vector } from '../../src/og/layer/Vector.js';
////import { Entity } from '../../src/og/entity/Entity.js';
////import { wgs84 } from '../../src/og/ellipsoid/wgs84.js';

////var osm = new XYZ("OpenStreetMap", {
////    isBaseLayer: true,
////    url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
////    visibility: true,
////    attribution: 'Data @ OpenStreetMap contributors, ODbL'
////});

////let size = 1000000;
////let ellipsoid = wgs84;
////let startlonlat = new LonLat(51.5, 7, 0);
////let endlonlat = new LonLat(51.5, 7, 1000);
////let startPos = ellipsoid.lonLatToCartesian(startlonlat);
////let endPos = ellipsoid.lonLatToCartesian(endlonlat);

////let e = new Entity({
////    'ray': {
////        'startPosition': startPos,
////        'endPosition': endPos,
////        'length': size,
////        'startColor': "red",
////        'endColor': "green",
////        'thickness': 10
////    }
////});

////let rayLayer = new Vector("rays", {
////    'polygonOffsetUnits': 0
////});

////rayLayer.add(e);

////var globus = new Globe({
////    "target": "earth",
////    "name": "Earth",
////    "terrain": new GlobusTerrain(),
////    "layers": [osm, rayLayer],
////    "sun": {
////        "active": true
////    }
////});

import { Globe } from "../../src/og/Globe.js";
import { Entity } from "../../src/og/entity/Entity.js";
import { XYZ } from "../../src/og/layer/XYZ.js";
import { Vector } from "../../src/og/layer/Vector.js";
import { GlobusTerrain } from "../../src/og/terrain/GlobusTerrain.js";
import { EmptyTerrain } from "../../src/og/terrain/EmptyTerrain.js";

var osm = new XYZ("OpenStreetMap", {
    isBaseLayer: true,
    url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    visibility: true,
    attribution: "Data @ OpenStreetMap contributors, ODbL"
});

var globus = new Globe({
    target: "earth",
    name: "Earth",
    terrain: /*new EmptyTerrain({
        gridSizeByZoom: [32, 16, 16, 8, 4, 4, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
    }),/*/ new GlobusTerrain(),
    layers: [osm, tg]
    //'viewExtent': [-1.12135, 51.60133, -1.11704, 51.60224]
});

fetch("./szint.json")
    .then((r) => {
        return r.json();
    })
    .then((data) => {
        var countries = new Vector("Countries", {
            visibility: true,
            isBaseLayer: false,
            diffuse: [0, 0, 0],
            ambient: [1, 1, 1]
        });

        countries.addTo(globus.planet);

        var f = data.features;
        for (var i = 0; i < f.length; i++) {
            var fi = f[i];
            countries.add(
                new Entity({
                    geometry: {
                        type: fi.geometry.type,
                        coordinates: fi.geometry.coordinates,
                        style: {
                            fillColor: "rgba(255,255,0,1.0)",
                            lineColor: "rgba(255,255,0,1.0)"
                        }
                    }
                })
            );
        }

        //countries.events.on("mouseleave", function (e) {
        //    e.pickingObject.geometry.setFillColor(1, 1, 1, 0.6);
        //    e.pickingObject.geometry.setLineColor(0.2, 0.6, 0.8, 1.0);
        //});
        //countries.events.on("mouseenter", function (e) {
        //    e.pickingObject.geometry.bringToFront();
        //    e.pickingObject.geometry.setFillColor(1, 0, 0, 0.4);
        //    e.pickingObject.geometry.setLineColor(1, 0, 0, 1.0);
        //});
        //countries.events.on("lclick", function (e) {
        //    globus.planet.flyExtent(e.pickingObject.geometry.getExtent());
        //});
        //countries.events.on("touchstart", function (e) {
        //    globus.planet.flyExtent(e.pickingObject.geometry.getExtent());
        //});
    });

globus.planet.addControl(
    new DebugInfo({
        watch: [
            {
                label: "metersInMinSize",
                frame: () => globus.planet.renderer.controls.scaleControl._metersInMinSize
            },
            {
                label: "meters in pixel",
                frame: () => globus.planet.renderer.controls.scaleControl._mPx
            }
        ]
    })
);
globus.planet.addControl(
    new ToggleWireframe({
        isActive: false
    })
);

window.globus = globus;