import { MapboxOverlay } from '@deck.gl/mapbox';
import { LineLayer, GeoJsonLayer } from '@deck.gl/layers';
import { TripsLayer, Tile3DLayer } from '@deck.gl/geo-layers';
import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
import { Matrix4 } from '@math.gl/core';

export default class mapBoxVectorLayer {
  //添加circle
  static addGeojsonCircle(layerId, geojson) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'circle',
        source: layerId,
        paint: {
          'circle-color': ['get', 'fillcolor'],
          'circle-radius': 10,
        },
      });
    }
  }
  //添加circle有标注
  static addGeojsonCircleWithLabel(layerId, geojson, minzoom) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'circle',
        source: layerId,
        paint: {
          'circle-color': ['get', 'fillcolor'],
          'circle-radius': 10,
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        minzoom: minzoom ? minzoom : 0,
        source: layerId + '_label',
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(36, 94, 122, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 3,
          'text-anchor': 'bottom',
          'text-max-width': 50,
        },
      });
    }
  }
  //添加geojson label
  static addGeojsonLabel(layerId, geojson) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      // Add a data source containing one point feature.
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'symbol',
        source: layerId,
        paint: {
          'text-color': ['get', 'fillcolor'],
          'text-halo-color': 'rgba(250, 247, 227, 1)',
          'text-halo-width': 1,
        },
        layout: {
          'text-allow-overlap': true,
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 1,
          'text-max-width': 50,
          //'text-offset': [0, 3],
        },
      });
    }
  }
  //添加geojson Symbol
  static addGeojsonSymbol(layerId, geojson, icon, iconsize) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.loadImage(icon, (error, image) => {
        if (error) throw error;

        // Add the image to the map style.
        newfiberMapbox.map.addImage(layerId, image);

        // Add a data source containing one point feature.
        newfiberMapbox.map.addSource(layerId, {
          type: 'geojson',
          data: geojson,
        });
        newfiberMapbox.map.addLayer({
          id: layerId,
          type: 'symbol',
          source: layerId,
          paint: {
            'text-color': 'rgba(255, 255, 255, 1)',
            // 地图上文字的
            'text-halo-color': 'rgba(0,0,0, 1)',
            'text-halo-width': 1,
          },
          layout: {
            'icon-image': layerId,
            'text-allow-overlap': true,
            'icon-allow-overlap': true,
            'icon-anchor': 'center',
            'icon-size': iconsize ? iconsize : 0.8,
            'text-field': '{name}',
            'text-font': ['KlokanTech Noto Sans Regular'],
            'icon-rotate': ['get', 'bearing'],
            'text-size': 18,
            'text-line-height': 3,
            'text-max-width': 50,
            'text-offset': [0, -3],
          },
        });
      });
    }
  }
  //添加热力图
  static addHeatMapLayer(layerId, geojson, value) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'heatmap',
        source: layerId,
        paint: {
          // Increase the heatmap weight based on frequency and property magnitude
          'heatmap-weight': ['interpolate', ['linear'], ['get', value], 0, 0, 100, 1],
          // Increase the heatmap color weight weight by zoom level
          // heatmap-intensity is a multiplier on top of heatmap-weight
          'heatmap-intensity': ['interpolate', ['linear'], ['zoom'], 0, 1, 9, 3],
          // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
          // Begin color ramp at 0-stop with a 0-transparancy color
          // to create a blur-like effect.
          'heatmap-color': [
            'interpolate',
            ['linear'],
            ['heatmap-density'],
            0,
            'rgba(43, 231, 171,0)',
            0.2,
            'rgba(43, 231, 171,0.6)',
            0.4,
            'rgb(43, 231, 171)',
            0.6,
            'rgb(24, 167, 242)',
            0.8,
            'rgb(248, 226, 112)',
            1,
            'rgb(178,24,43)',
          ],
          // Adjust the heatmap radius by zoom level
          'heatmap-radius': ['interpolate', ['linear'], ['zoom'], 0, 2, 9, 30],
          // Transition from heatmap to circle layer by zoom level
          'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], 1, 0, 15, 1],
        },
      });
    }
  }
  //添加geojson线
  static addGeojsonLine(layerId, geojson, lineWidth, lineOpacity, lineBlur) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'line',
        source: layerId,
        paint: {
          'line-color': ['get', 'color'],
          'line-width': lineWidth ? lineWidth : 3,
          'line-opacity': lineOpacity ? lineOpacity : 1,
          'line-blur': lineBlur ? lineBlur : 0,
        },
      });
    }
  }
  //添加有标注的geojson线
  static addGeojsonLineWithLabel(layerId, geojson, lineWidth, minzoom) {
    let labelGeojson = this.getGeojsonCenterPoint(geojson);
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: labelGeojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'line',
        source: layerId,
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': lineWidth ? lineWidth : 3,
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        minzoom: minzoom ? minzoom : 0,
        source: layerId + '_label',
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(36, 94, 122, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 3,
          'text-anchor': 'bottom',
          'text-max-width': 50,
        },
      });
    }
  }
  //添加geojson面
  static addGeojsonPolygon(layerId, geojson) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });

      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'fill',
        source: layerId,
        paint: {
          'fill-color': ['get', 'fillcolor'] || 'rgba(154,104,171,0.8)',
        },
      });
    }
  }

  //添加有标注的geojson面
  static addGeojsonPolygonWithLabel(layerId, geojson, minzoom, text_max_width) {
    let labelGeojson = this.getGeojsonCenterPoint(geojson);
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addSource(layerId + '_label', {
        type: 'geojson',
        data: labelGeojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'fill',
        source: layerId,
        paint: {
          'fill-color': ['get', 'fillcolor'],
        },
      });
      newfiberMapbox.map.addLayer({
        id: layerId + '_label',
        type: 'symbol',
        source: layerId + '_label',
        minzoom: minzoom ? minzoom : 0,
        paint: {
          'text-color': 'rgba(255, 255, 255, 1)',
          'text-halo-color': 'rgba(36, 94, 122, 1)',
          'text-halo-width': 2,
        },
        layout: {
          'text-field': '{name}',
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-line-height': 1,
          'text-max-width': !!text_max_width ? text_max_width : 50,
        },
      });
    }
  }
  //获取geojson中心点
  static getGeojsonCenterPoint(geojson) {
    let features = [];
    geojson.features.forEach(element => {
      let feature = turf.center(element, element);
      features.push(feature);
    });
    return {
      type: 'FeatureCollection',
      features: features,
    };
  }
  //添加image图层
  static addImageToMap(layerId, coordinates, imageUrl) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'image',
        url: imageUrl,
        coordinates: coordinates,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'raster',
        source: layerId,
        paint: {},
      });
    }
  }
  //添加geoserver图层
  static addWMSLayer(layerName) {
    if (!newfiberMapbox.map.getLayer(layerName)) {
      newfiberMapbox.map.addSource(layerName, {
        type: 'raster',
        // use the tiles option to specify a WMS tile source URL
        // https://docs.mapbox.comhttps://docs.mapbox.com/style-spec/reference/sources/
        tiles: [
          '/geoserver/demo/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&' +
            `layers=${layerName}`,
        ],
        tileSize: 256,
      });
      newfiberMapbox.map.addLayer({
        id: layerName,
        type: 'raster',
        source: layerName,
        paint: {},
      });
    }
  }
  //添加沿线标注
  static addLabelAlongLine(layerId, geojson) {
    if (!newfiberMapbox.map.getLayer(layerId)) {
      newfiberMapbox.map.addSource(layerId, {
        type: 'geojson',
        data: geojson,
      });
      newfiberMapbox.map.addLayer({
        id: layerId,
        type: 'symbol',
        source: layerId,
        layout: {
          'text-field': ['get', 'name'],
          'symbol-placement': 'line-center',
          'text-offset': [0, -0.5],
          //'text-anchor': 'top',
          'text-size': 20,
          'text-allow-overlap': true,
          'text-letter-spacing': 1.1,
        },
        paint: {
          'text-color': ['get', 'fillcolor'],
          'text-halo-color': 'rgba(250, 247, 227, 1)',
          'text-halo-width': 1,
        },
      });
    }
  }
  //添加轨迹动态线
  static addDynamicRoute = (layerId, geojson, icon) => {
    window.routeTimer = null;

    this.addGeojsonLine(layerId, geojson, 10);
    let symbolGeojson = turf.featureCollection([
      turf.point(geojson.features[0].geometry.coordinates[0], {
        bearing: turf.bearing(
          turf.point(geojson.features[0].geometry.coordinates[0]),
          turf.point(geojson.features[0].geometry.coordinates[1])
        ),
      }),
    ]);

    this.addGeojsonSymbol(layerId + '_Symbol', symbolGeojson, icon);

    const lineDistance = turf.length(geojson.features[0]);

    const arc = [];
    const steps = 100;
    for (let i = 0; i < lineDistance; i += lineDistance / steps) {
      const segment = turf.along(geojson.features[0], i);
      arc.push(segment.geometry.coordinates);
    }

    geojson.features[0].geometry.coordinates = arc;

    let counter = 0;
    setTimeout(() => {
      // map.setBearing(90);
      window.routeTimer = setInterval(() => {
        const start = geojson.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];
        const end = geojson.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];
        if (!start || !end) {
          return;
        }
        symbolGeojson.features[0].geometry.coordinates = geojson.features[0].geometry.coordinates[counter];
        symbolGeojson.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));
        newfiberMapbox.map.setBearing(symbolGeojson.features[0].properties.bearing);
        newfiberMapbox.map.setLayoutProperty(layerId + '_Symbol', 'icon-rotation-alignment', 'map');
        newfiberMapbox.map.getSource(layerId + '_Symbol').setData(symbolGeojson);
        counter = counter + 1;
        if (counter > steps) {
          clearInterval(window.routeTimer);
        }
      }, 500);
    }, 1000);
    // if (!start || !end || !start_1 || !end_1) {
    //   return;
    // }

    // symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
    // symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
  };
  //移除图层
  static removeByIds(layernameList) {
    layernameList.forEach(layerName => {
      if (newfiberMapbox.map.getLayer(layerName)) {
        newfiberMapbox.map.removeLayer(layerName);
        newfiberMapbox.map.removeSource(layerName);
      }
      if (newfiberMapbox.map.hasImage(layerName)) {
        newfiberMapbox.map.removeImage(layerName);
      }
    });
  }

  static remove3Dtiles() {
    let deckOverlay = null;
    deckOverlay = newfiberMapbox.map._controls.filter(i => i.constructor.name == 'MapboxOverlay')[0];
    deckOverlay && deckOverlay.setProps({ layers: [] });
  }

  static load3DTiles(name, id, url) {
    let deckOverlay = null;
    deckOverlay = newfiberMapbox.map._controls.filter(i => i.constructor.name == 'MapboxOverlay')[0];
    if (!deckOverlay) {
      deckOverlay = new MapboxOverlay({
        interleaved: true,
        layers: [],
      });
      newfiberMapbox.map.addControl(deckOverlay);
    }
    const layers = deckOverlay._props.layers;
    deckOverlay.setProps({
      layers: [
        ...layers,
        new Tile3DLayer({
          id: 'aaaa',
          name: 'aaaa',
          data: 'https://supermap0.wh-nf.cn:8090/resource/3dtiles/y_a/tileset.json',
          loader: Tiles3DLoader,
          extruded: true, // 设置3D功能
          opacity: 1, // 设置透明度
          loadOptions: {
            '3d-tiles': {
              loadGLTF: true,
              decodeQuantizedPositions: false,
              isTileset: 'auto',
              assetGltfUpAxis: null,
            },
          },
          pickable: true, // 设置可选取
          onTilesetLoad: tileset => {
            const { cartographicCenter, zoom } = tileset;
            deckOverlay.setProps({
              initialViewState: {
                longitude: cartographicCenter[0],
                latitude: cartographicCenter[1],
                zoom,
              },
            });
          },
          pointSize: 2,
        }),
      ],
    });
  }
}