import { Fragment } from "react";
import PropTypes from "prop-types";
import * as d3 from "d3";
import { jsx } from "@emotion/core";

var PolygonPreview = function PolygonPreview(_ref) {
  var feature = _ref.feature,
      svgCss = _ref.svgCss,
      svgWidth = _ref.svgWidth,
      svgHeight = _ref.svgHeight,
      stroke = _ref.stroke,
      strokeWidth = _ref.strokeWidth,
      fill = _ref.fill,
      fillOpacity = _ref.fillOpacity,
      padding = _ref.padding,
      reflectY = _ref.reflectY;
  var projection = d3.geoIdentity().reflectY(reflectY).fitExtent([[padding, padding], [svgWidth - padding, svgHeight - padding]], feature);
  var background = d3.geoPath().projection(projection)(feature);
  return jsx(Fragment, null, jsx("svg", {
    viewBox: "0 0 ".concat(svgWidth, " ").concat(svgHeight),
    css: svgCss
  }, jsx("path", {
    d: background,
    stroke: stroke,
    strokeWidth: strokeWidth,
    fill: fill,
    fillOpacity: fillOpacity
  })));
};

PolygonPreview.propTypes = {
  feature: PropTypes.shape({
    type: PropTypes.string
  }),
  svgCss: PropTypes.shape({}),
  svgWidth: PropTypes.number,
  svgHeight: PropTypes.number,
  stroke: PropTypes.string,
  strokeWidth: PropTypes.number,
  fill: PropTypes.string,
  fillOpacity: PropTypes.number,
  padding: PropTypes.number,
  reflectY: PropTypes.bool
};
PolygonPreview.defaultProps = {
  svgWidth: 650,
  svgHeight: 350,
  stroke: "#000000",
  strokeWidth: 1,
  fill: "#000000",
  fillOpacity: 0,
  padding: 5,
  reflectY: true
};
PolygonPreview.displayName = "PolygonPreview";
export default PolygonPreview;