import maplibregl from "maplibre-gl";
import {Deck} from '@deck.gl/core';
import {PointCloudLayer} from '@deck.gl/layers';
import {LASLoader} from '@loaders.gl/las';
import {MapboxOverlay} from '@deck.gl/mapbox';
import {COORDINATE_SYSTEM} from '@deck.gl/core';


const center = [9.209116842757239, 52.26520546238239]

const map = new maplibregl.Map({
    container: 'map',
    style: "https://tiles.openfreemap.org/styles/bright",
    center: center,
    zoom: 17
});

map.addControl(
    new maplibregl.NavigationControl({
        visualizePitch: true,
        showZoom: true,
        showCompass: true
    })
);

const layer = new PointCloudLayer({
  data: 'punktwolke subsample test.laz',
  loaders: [LASLoader],

    // 1. Set the coordinate system to meter offsets
  coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
  
  // 2. Set the anchor point [longitude, latitude, elevation]
  coordinateOrigin: [9.209116842757239, 52.26520546238239], 
  pointSize: 1,
  getColor: [255,255,255]
});


const overlay = new MapboxOverlay({
  layers: [layer]
});

//map.addControl(overlay);


// Hintergrundkarte ändern
function changeBaseMap(newMap){
  var basemapStyle;
  switch(newMap){
    case "openfree_dark":
      basemapStyle = "https://tiles.openfreemap.org/styles/dark"
      break;
    case "openfree_bright":
      basemapStyle = "https://tiles.openfreemap.org/styles/bright"
      break;
    case "openfree_liberty":
      basemapStyle = "https://tiles.openfreemap.org/styles/liberty"
      break;
    case "google_satellite":
      basemapStyle = {
    version: 8,
    sources: {
      "raster-tiles": {
        type: "raster",
        tiles: [
          "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
          "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        ],
        tileSize: 256,
      },
    },
    layers: [{ id: "raster-layer", type: "raster", source: "raster-tiles" }],
  }
    break;
  case "terrain":
    basemapStyle = {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                tiles: ['https://a.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                attribution: '© OpenStreetMap Contributors',
                maxzoom: 19
            },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
    break;
    case "satellite_terrain": 
      basemapStyle =  {
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                 tiles: [
                  "https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt2.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
                  "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        ],
                tileSize: 256,
                attribution: '© OpenStreetMap Contributors',
                maxzoom: 19
            },
            // Use a different source for terrain and hillshade layers, to improve render quality
            terrainSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json',
            },
            hillshadeSource: {
                type: 'raster-dem',
                url: 'https://tiles.mapterhorn.com/tilejson.json'
            }
        },
        layers: [
            {
                id: 'osm',
                type: 'raster',
                source: 'osm'
            },
            {
                id: 'hills',
                type: 'hillshade',
                source: 'hillshadeSource',
                layout: {visibility: 'visible'},
                paint: {'hillshade-shadow-color': '#473B24'}
            }
        ],
        terrain: {
            source: 'terrainSource',
            exaggeration: 1
        },
        sky: {}
    }
	
  }
  map.setStyle(basemapStyle);
}


// dargestellte Punktwolke verändern
function changePointCloud(data){
  layer.data = data;
}


// ausgewähltes Element im BaseMap DropDown Feld
const selectElement = document.querySelector('select[name="basemap"]');
selectElement.addEventListener('change', (event) => {
  changeBaseMap(event.target.value);
});



// ausgewähltes Element im Punktwolken DropDown Feld
document.querySelector('select[name="pointcloud"]').addEventListener('change', (event) => {
  changePointCloud(event.target.value);
});


// Auf Zentrum zurück zoomen
document.getElementById("location").addEventListener("click", () => {
 map.flyTo({center, zoom: 17 })
});