<script lang="jsx">
import { point, featureCollection } from "@turf/turf";
import GeoJsonSource from "@/components/GisMap/GeoJsonSource/index.vue";
import Layer from "@/components/GisMap/Layer/index.vue";
import {
  tempWeatherLayerLayout,
  tempWeatherLayerPaint,
  tempWeatherLayerFilter,
  tempWeatherClusterLayerLayout,
  tempWeatherClusterLayerPaint,
  tempWeatherClusterLayerFilter,
} from "./config";
export default {
  name: "TempWeatherLayer",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    sourceId: {
      type: String,
      default: "tempWeather",
    },
    layerId: {
      type: String,
      default: "tempWeather",
    },
    clusterLayerId: {
      type: String,
      default: "tempWeatherCluster",
    },
    cluster: {
      type: Boolean,
      default: true,
    },
    clusterRadius: {
      type: Number,
      default: 20,
    },
    clusterMaxZoom: {
      type: Number,
      default: 12,
    },
    clusterProperties: {
      type: Object,
      default: () => ({
        maxStake: ["max", ["get", "mpoint"]],
        minStake: ["min", ["get", "mpoint"]],
      }),
    },
    layerLayout: {
      type: Object,
      default: () => tempWeatherLayerLayout,
    },
    layerPaint: {
      type: Object,
      default: () => tempWeatherLayerPaint,
    },
    layerFilter: {
      type: Array,
      default: () => tempWeatherLayerFilter,
    },
    clusterLayerLayout: {
      type: Object,
      default: () => tempWeatherClusterLayerLayout,
    },
    clusterLayerPaint: {
      type: Object,
      default: () => tempWeatherClusterLayerPaint,
    },
    clusterLayerFilter: {
      type: Array,
      default: () => tempWeatherClusterLayerFilter,
    },
  },
  computed: {
    sourceData() {
      const { data } = this;
      if (!data || data.length < 1) {
        return null;
      }
      const features = [];
      data.forEach((item) => {
        if (!item.mpointLon || !item.mpointLat) {
          return;
        }
        features.push(
          point([item.mpointLon, item.mpointLat], {
            ...item,
            mpoint: Number(item.mpoint),
          })
        );
      });
      return featureCollection(features);
    },
  },
  methods: {
    onLayerClick(evt) {
      this.$emit("layerClick", evt);
    },
    onClusterLayerClick(evt) {
      this.$emit("clusterLayerClick", evt);
    },
    onContextmenu(evt) {
      this.$emit("contextMenu", evt);
    },
  },
  render() {
    const {
      sourceId,
      layerId,
      clusterLayerId,
      sourceData,
      cluster,
      clusterRadius,
      clusterMaxZoom,
      clusterProperties,
      layerLayout,
      layerPaint,
      layerFilter,
      clusterLayerLayout,
      clusterLayerPaint,
      clusterLayerFilter,
      onLayerClick,
      onClusterLayerClick,
      onContextmenu,
    } = this;
    if (!sourceData) {
      return null;
    }
    return (
      <GeoJsonSource
        id={sourceId}
        data={sourceData}
        cluster={false}
        clusterRadius={clusterRadius}
        clusterMaxZoom={clusterMaxZoom}
        clusterProperties={clusterProperties}
      >
        {/* <Layer
          id={clusterLayerId}
          layout={clusterLayerLayout}
          paint={clusterLayerPaint}
          filter={clusterLayerFilter}
          onClick={onClusterLayerClick}
        /> */}
        <Layer
          id={layerId}
          minzoom={10}
          layout={layerLayout}
          paint={layerPaint}
          filter={layerFilter}
          onClick={onLayerClick}
          onContextmenu={onContextmenu}
        />
      </GeoJsonSource>
    );
  },
};
</script>
