import * as mapboxgl from "mapbox-gl";
import Bbox from "@turf/bbox";
import BboxPolygon from "@turf/bbox-polygon";
import Center from "@turf/center";
import BooleanContains from "@turf/boolean-contains";
import BooleanOverlap from "@turf/boolean-overlap";
import Buffer from "@turf/buffer";
import confini from "../layers/confini.json";
import confiniHole from "../layers/confini_hole.json";
import aree_omogenee from "../layers/aree_omogenee.json";
import scuole_buffer from "../layers/scuole_buffer.json";
import luoghi_monumentali_buffer from "../layers/luoghi_monumentali_buffer.json";
import mercati_buffer from "../layers/mercati_buffer.json";
import musei_buffer from "../layers/musei_buffer.json";
import ospedali_cliniche_buffer from "../layers/ospedali_cliniche_buffer.json";
import stazioni_ferrovie_buffer from "../layers/stazioni_ferrovie_buffer.json";
import stazioni_metro_buffer from "../layers/stazioni_metro_buffer.json";
import parchi_buffer from "../layers/parchi_buffer.json";
import "../style.css";

mapboxgl.accessToken =
  "pk.eyJ1IjoidGVvIiwiYSI6IllvZUo1LUkifQ.dirqtn275pAKdnqtLM2HSw";

const bounds = Bbox(confini);
const maxBounds = Bbox(Buffer(confini, 100));
const map = new mapboxgl.Map({
  container: "map",
  zoom: 11,
  center: Center(confini).geometry.coordinates,
  style: "mapbox://styles/teo/cjyxhh5n92wy51ck4a4uiymtu/draft",
  maxBounds: [[maxBounds[0], maxBounds[1]], [maxBounds[2], maxBounds[3]]],
  maxZoom: 16
});

map.addControl(new mapboxgl.GeolocateControl());
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, "top-right");
map.addControl(new mapboxgl.FullscreenControl());

map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
  padding: 20
});

// const slider = document.getElementById("slider");
// const sliderValue = document.getElementById("slider-value");

map.on("load", function() {
  map.setLayoutProperty("building", "visibility", "none");
  map.setLayoutProperty("building-outline", "visibility", "none");

  map.addSource("aree_omogeneeSource", {
    type: "geojson",
    data: aree_omogenee
  });

  map.addSource("scuoleBufferSource", {
    type: "geojson",
    data: scuole_buffer
  });

  map.addSource("luoghiMonumentaliBufferSource", {
    type: "geojson",
    data: luoghi_monumentali_buffer
  });

  map.addSource("mercatiBufferSource", {
    type: "geojson",
    data: mercati_buffer
  });

  map.addSource("museiBufferSource", {
    type: "geojson",
    data: musei_buffer
  });

  map.addSource("ospedaliClinicheBufferSource", {
    type: "geojson",
    data: ospedali_cliniche_buffer
  });

  map.addSource("stazioniFerrovieBufferSource", {
    type: "geojson",
    data: stazioni_ferrovie_buffer
  });

  map.addSource("stazioniMetroBufferSource", {
    type: "geojson",
    data: stazioni_metro_buffer
  });

  map.addSource("parchiBufferSource", {
    type: "geojson",
    data: parchi_buffer
  });

  map.addSource("confiniHoleSource", {
    type: "geojson",
    data: confiniHole
  });

  map.addSource("confiniSource", {
    type: "geojson",
    data: confini
  });

  map.addSource("osmbuildings", {
    type: "vector",
    url: "https://data.osmbuildings.org/0.2/rkc8ywdl/tile.json"
  });

  const layers = map.getStyle().layers;
  //console.log(layers);
  let labelLayerId = "";
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].type === "symbol" && layers[i].layout["text-field"]) {
      labelLayerId = layers[i].id;
      break;
    }
  }

  map.addLayer(
    {
      id: "aree_omogenee",
      type: "fill",
      source: "aree_omogeneeSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "parchi_buffer",
      type: "fill",
      source: "parchiBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "mercati_buffer",
      type: "fill",
      source: "mercatiBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "scuole_buffer",
      type: "fill",
      source: "scuoleBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "musei_buffer",
      type: "fill",
      source: "museiBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "ospedali_cliniche_buffer",
      type: "fill",
      source: "ospedaliClinicheBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "stazioni_ferrovie_buffer",
      type: "fill",
      source: "stazioniFerrovieBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "stazioni_metro_buffer",
      type: "fill",
      source: "stazioniMetroBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "luoghi_monumentali_buffer",
      type: "fill",
      source: "luoghiMonumentaliBufferSource",
      layout: { visibility: "visible" },
      paint: {
        "fill-color": "#f5553d",
        "fill-opacity": 1
      }
    },
    "building-outline"
  );

  map.addLayer(
    {
      id: "buildings-base",
      type: "fill",
      source: "osmbuildings",
      "source-layer": "building",
      // filter: ["all", ["==", "minHeight", 0]],
      // layout: {},
      paint: {
        "fill-color": "#fff",
        "fill-opacity": { stops: [[16, 0], [17.5, 1]] }
      }
    },
    labelLayerId
  );

  map.addLayer(
    {
      id: "buildings-3d",
      type: "fill-extrusion",
      source: "osmbuildings",
      "source-layer": "building",
      paint: {
        "fill-extrusion-color": "#f5553d",
        "fill-extrusion-height": [
          "interpolate",
          ["linear"],
          ["zoom"],
          15,
          0,
          15.05,
          [
            "number",
            ["get", "height"],
            ["*", ["number", ["get", "levels"], 3], 3]
          ]
        ],
        "fill-extrusion-base": [
          "interpolate",
          ["linear"],
          ["zoom"],
          15,
          0,
          15.05,
          [
            "number",
            ["get", "minHeight"],
            ["*", ["number", ["get", "minLevel"], 0], 3]
          ]
        ],

        "fill-extrusion-opacity": {
          stops: [[15, 0], [15.5, 1], [16, 1], [17.5, 0.6]]
        }
      },
      //filter: ["!=", ["string", ["get", "shape"], ""], "none"]
      filter: ["match", ["get", "id"], "", true, false]
    },
    labelLayerId
  );

  map.addLayer(
    {
      id: "confiniHole",
      source: "confiniHoleSource",
      type: "fill",
      paint: {
        "fill-color": "#fff"
      }
    },
    "settlement-subdivision-label"
  );

  map.addLayer(
    {
      id: "confini",
      source: "confiniSource",
      type: "line",
      paint: {
        "line-color": "#000"
      }
    },
    "settlement-subdivision-label"
  );
});

map.on("moveend", function() {
  if (map.getZoom() >= 15) {
    const aulenti = aree_omogenee.features.filter(
      f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
    )[0];

    let buildings = map.queryRenderedFeatures({
      layers: ["buildings-base"],
      filter: ["!=", ["string", ["get", "shape"], ""], "none"]
    });

    let features = map.queryRenderedFeatures({
      layers: [
        "aree_omogenee",
        "parchi_buffer",
        "luoghi_monumentali_buffer",
        "mercati_buffer",
        "musei_buffer",
        "ospedali_cliniche_buffer",
        "scuole_buffer",
        "stazioni_ferrovie_buffer",
        "stazioni_metro_buffer"
      ]
    });

    const filtered = buildings
      .filter(b => {
        let inside = false;
        for (let feature of features) {
          //console.log(b, feature);
          if (BooleanContains(feature, b)) {
            inside = true;
            break;
          } else {
            inside = false;
          }
        }
        return inside;
      })
      .map(b => b.properties.id);

    const ids = [...new Set(filtered)].filter(i => i);

    const filter = ["match", ["get", "id"], ids, true, false];

    if (ids.length) {
      map.setFilter("buildings-3d", filter);
    }
  }
});

map.on("zoomend", function() {
  if (map.getZoom() >= 15) {
    const aulenti = aree_omogenee.features.filter(
      f => f.properties.area === "C.so Garibladi, C.so Como, Gae Aulenti"
    )[0];

    let buildings = map.queryRenderedFeatures({
      layers: ["buildings-base"],
      filter: ["!=", ["string", ["get", "shape"], ""], "none"]
    });

    let features = map.queryRenderedFeatures({
      layers: [
        "aree_omogenee",
        "parchi_buffer",
        "luoghi_monumentali_buffer",
        "mercati_buffer",
        "musei_buffer",
        "ospedali_cliniche_buffer",
        "scuole_buffer",
        "stazioni_ferrovie_buffer",
        "stazioni_metro_buffer"
      ]
    });

    const filtered = buildings
      .filter(b => {
        let inside = false;
        for (let feature of features) {
          //console.log(b, feature);
          if (BooleanContains(feature, b)) {
            inside = true;
            break;
          } else {
            inside = false;
          }
        }
        return inside;
      })
      .map(b => b.properties.id);

    const ids = [...new Set(filtered)].filter(i => i);

    const filter = ["match", ["get", "id"], ids, true, false];

    if (ids.length) {
      map.setFilter("buildings-3d", filter);
    }
  }
});

var toggleableLayerIds = [
  { id: "scuole_buffer", label: "Scuole e università" },
  { id: "mercati_buffer", label: "Mercati stradali" },
  { id: "parchi_buffer", label: "Parchi" },
  { id: "ospedali_cliniche_buffer", label: "Ospedali e cliniche" },
  { id: "luoghi_monumentali_buffer", label: "Luoghi monumentali" },
  { id: "musei_buffer", label: "Musei" },
  { id: "aree_omogenee", label: "Macro aree" },
  { id: "stazioni_ferrovie_buffer", label: "Stazioni ferroviarie" },
  { id: "stazioni_metro_buffer", label: "Stazioni metropolitane" }
];

for (var i = 0; i < toggleableLayerIds.length; i++) {
  var layer = toggleableLayerIds[i];

  var link = document.createElement("a");
  link.href = "#";
  link.className = "active";
  link.textContent = i + 1 + ". " + layer.label;
  link.setAttribute("layerid", layer.id);

  link.onclick = function(e) {
    var clickedLayer = this.getAttribute("layerid");
    e.preventDefault();
    e.stopPropagation();

    var visibility = map.getLayoutProperty(clickedLayer, "visibility");

    if (visibility === "visible") {
      map.setLayoutProperty(clickedLayer, "visibility", "none");
      this.className = "";
    } else {
      this.className = "active";
      map.setLayoutProperty(clickedLayer, "visibility", "visible");
    }
  };

  var layers = document.getElementById("menu");
  layers.appendChild(link);
}