import React from "react";
import { ScreenGridLayer } from "deck.gl";
import shortid from "shortid";
import { number, string, bool, func, arrayOf, shape } from "prop-types";
import CIVIC_MAP_COLORS from "./mapStyles";

var MultiScreenGridMap = function MultiScreenGridMap(props) {
  var id = props.id,
      data = props.data,
      _props$pickable = props.pickable,
      pickable = _props$pickable === void 0 ? true : _props$pickable,
      _props$civicColor = props.civicColor,
      civicColor = _props$civicColor === void 0 ? "thermal" : _props$civicColor,
      _props$opacity = props.opacity,
      opacity = _props$opacity === void 0 ? 0.7 : _props$opacity,
      _props$getPosition = props.getPosition,
      getPosition = _props$getPosition === void 0 ? function (f) {
    return f.geometry.coordinates;
  } : _props$getPosition,
      _props$squareSize = props.squareSize,
      squareSize = _props$squareSize === void 0 ? 10 : _props$squareSize,
      _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;
  var colorRange = CIVIC_MAP_COLORS[civicColor];
  return React.createElement(ScreenGridLayer, {
    key: shortid.generate(),
    id: id,
    pickable: pickable,
    data: data,
    getPosition: getPosition,
    opacity: opacity,
    colorRange: colorRange,
    cellSizePixels: squareSize,
    autoHighlight: autoHighlight,
    highlightColor: highlightColor,
    gpuAggregation: false,
    updateTriggers: {
      colorRange: colorRange
    }
  });
};

MultiScreenGridMap.propTypes = {
  id: string.isRequired,
  data: arrayOf(shape({})).isRequired,
  pickable: bool,
  civicColor: string,
  opacity: number,
  getPosition: func,
  squareSize: number,
  autoHighlight: bool,
  highlightColor: arrayOf(number)
};
export default MultiScreenGridMap;