import React from "react";
import { GeoJsonLayer } from "deck.gl";
import { memoize } from "lodash";
import { number, string, bool, func, arrayOf, shape } from "prop-types";
import { createColorScale, updateQuantileScale, updateEqualScale } from "./createLayers";
var memoizeData = memoize(function (featuresArr) {
  return featuresArr.filter(function (f) {
    return f.geometry && f.geometry.coordinates.length;
  });
});

var MultiChoroplethMap = function MultiChoroplethMap(props) {
  var id = props.id,
      data = props.data,
      _props$pickable = props.pickable,
      pickable = _props$pickable === void 0 ? true : _props$pickable,
      _props$opacity = props.opacity,
      opacity = _props$opacity === void 0 ? 0.7 : _props$opacity,
      _props$civicColor = props.civicColor,
      civicColor = _props$civicColor === void 0 ? "thermal" : _props$civicColor,
      _props$getPolygon = props.getPolygon,
      getPolygon = _props$getPolygon === void 0 ? function (f) {
    return f.geometry.coordinates;
  } : _props$getPolygon,
      _props$filled = props.filled,
      filled = _props$filled === void 0 ? true : _props$filled,
      _props$stroked = props.stroked,
      stroked = _props$stroked === void 0 ? true : _props$stroked,
      _props$lineWidth = props.lineWidth,
      lineWidth = _props$lineWidth === void 0 ? 1 : _props$lineWidth,
      _props$polygonLineCol = props.polygonLineColor,
      polygonLineColor = _props$polygonLineCol === void 0 ? [169, 169, 169] : _props$polygonLineCol,
      _props$autoHighlight = props.autoHighlight,
      autoHighlight = _props$autoHighlight === void 0 ? true : _props$autoHighlight,
      _props$highlightColor = props.highlightColor,
      highlightColor = _props$highlightColor === void 0 ? [255, 255, 0, 100] : _props$highlightColor,
      onHoverSlide = props.onHoverSlide,
      onLayerClick = props.onLayerClick,
      _props$scaleType = props.scaleType,
      scaleType = _props$scaleType === void 0 ? {
    color: "equal"
  } : _props$scaleType,
      fieldName = props.fieldName,
      _props$dataRange = props.dataRange,
      dataRange = _props$dataRange === void 0 ? [] : _props$dataRange,
      _props$colorRange = props.colorRange,
      colorRange = _props$colorRange === void 0 ? [] : _props$colorRange,
      index = props.index,
      selectedFoundationDatum = props.selectedFoundationDatum;
  var choroplethColorScale = createColorScale(civicColor, scaleType, dataRange, colorRange);

  if (scaleType.color === "equal") {
    choroplethColorScale = updateEqualScale(data, choroplethColorScale, civicColor, dataRange, colorRange, fieldName);
  }

  if (scaleType.color === "quantile") {
    choroplethColorScale = updateQuantileScale(data, choroplethColorScale, civicColor, colorRange, fieldName);
  }

  var getFillColor = function getFillColor(feature) {
    var fieldNameColor = fieldName.color;
    var value = feature.properties["".concat(fieldNameColor)];
    return value ? choroplethColorScale(value) : [0, 0, 0, 128];
  };

  var getLineColor = function getLineColor(f) {
    if (selectedFoundationDatum) {
      var selectedId = selectedFoundationDatum.id;
      var featureId = f.id;
      return featureId === selectedId ? [255, 178, 31, 255] : polygonLineColor;
    }

    return polygonLineColor;
  };

  var getLineWidth = function getLineWidth(f) {
    if (selectedFoundationDatum) {
      var selectedId = selectedFoundationDatum.id;
      var featureId = f.id;
      return featureId === selectedId ? 125 : lineWidth;
    }

    return lineWidth;
  };

  var filteredData = memoizeData(data);
  return React.createElement(GeoJsonLayer, {
    key: id,
    id: id,
    pickable: pickable,
    data: filteredData,
    opacity: opacity,
    getPolygon: getPolygon,
    filled: filled,
    getFillColor: getFillColor,
    stroked: stroked,
    getLineColor: getLineColor,
    getLineWidth: getLineWidth,
    lineWidthMinPixels: 1,
    lineWidthScale: 1,
    lineJointRounded: false,
    extruded: false,
    onHover: function onHover(info) {
      return onHoverSlide(info, index);
    },
    onClick: function onClick(info) {
      return onLayerClick(info, index);
    },
    autoHighlight: autoHighlight,
    highlightColor: highlightColor,
    parameters: {
      depthTest: false
    },
    updateTriggers: {
      getFillColor: getFillColor,
      getLineColor: getLineColor,
      getLineWidth: getLineWidth
    }
  });
};

MultiChoroplethMap.propTypes = {
  id: string.isRequired,
  data: arrayOf(shape({})).isRequired,
  pickable: bool,
  civicColor: string,
  opacity: number,
  getPolygon: func,
  filled: bool,
  stroked: bool,
  lineWidth: number,
  polygonLineColor: arrayOf(number),
  autoHighlight: bool,
  highlightColor: arrayOf(number),
  onHoverSlide: func,
  onLayerClick: func,
  scaleType: shape({
    color: string
  }),
  fieldName: shape({
    color: string
  }).isRequired,
  dataRange: arrayOf(string),
  colorRange: arrayOf(arrayOf(number)),
  index: number,
  selectedFoundationDatum: shape({
    id: number,
    displayName: string,
    featureProperties: shape({}),
    colorKey: string,
    primaryFormat: string
  })
};
export default MultiChoroplethMap;