import React, { useEffect } from "react";
import { Layer, Source } from "react-map-gl/mapbox-legacy";
import { FeatureCollection } from "geojson";

interface Props {
  objectCollection: FeatureCollection;
  measurementCollection?: FeatureCollection;
  showTitle?: boolean;
  setInteractiveLayers: (layers: string[]) => void;
}

export default function GeoMapLayer(props: Props) {
  const { objectCollection, measurementCollection, showTitle, setInteractiveLayers } = props;

  // useEffect(() => {
  //   console.log(objectCollection);
  //   console.log(measurementCollection);
  // }, [measurementCollection, objectCollection]);

  useEffect(() => {
    setInteractiveLayers(["shapefill", "shapeborder", "measurementBorder"]);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <React.Fragment>
      <Source type="geojson" data={objectCollection} id={"objects"}>
        <Layer
          id="shapefill"
          type="fill"
          paint={{
            "fill-color": ["get", "fill"], //using react-map-gl's data driven expressions you can get data from the properties of the feature
            "fill-opacity": 0.7
          }}
        />
        <Layer
          id="shapeborder"
          type="line"
          layout={{
            "line-join": "round",
            "line-cap": "round"
          }}
          paint={{
            "line-color": "white",
            "line-width": ["get", "lineWidth"]
          }}
        />
        {showTitle && (
          <Layer
            id="shapetitle"
            type="symbol"
            layout={{
              "text-field": ["get", "title"],
              "text-size": 18,
              "text-font": ["Open Sans Bold"],
              "text-anchor": "center"
            }}
            paint={{
              "text-color": "white"
            }}
          />
        )}
      </Source>
      <Source type="geojson" data={measurementCollection} id={"measurements"}>
        <Layer
          id="measurementBorder"
          type="line"
          layout={{
            "line-join": "round",
            "line-cap": "round"
          }}
          paint={{
            "line-color": "white",
            "line-width": ["get", "lineWidth"]
          }}
        />
        <Layer
          id="totalDistance"
          type="symbol"
          layout={{
            "text-field": ["get", "totalDist"],
            "text-size": 18,
            "text-font": ["Open Sans Bold"],
            //"symbol-placement": "line-center",
            "text-anchor": "bottom-left",
            "icon-allow-overlap": true,
            "text-offset": [0, -1]
          }}
          paint={{
            "text-color": "white"
          }}
        />
      </Source>
    </React.Fragment>
  );
}