"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _MapContext = require("../../modules/MapContext");
var _react = require("react");
var _Shape = _interopRequireDefault(require("./Shape"));
var _CirclePainter = require("../../modules/painters/CirclePainter");
var _common = require("../../utils/common");
var _CircleLayer = _interopRequireDefault(require("../CircleLayer"));
var _SymbolLayer = _interopRequireDefault(require("../SymbolLayer"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const defaultCircleStyle = {
  circleRadius: ['get', 'radius'],
  circleColor: '#8c8af5',
  circleOpacity: 0.7
};
const defaultOutCircleStyle = {
  circleRadius: 8,
  circleStrokeColor: '#1878ff',
  circleStrokeWidth: 2,
  circleColor: 'transparent'
};
const defaultInnerCircleStyle = {
  circleRadius: 3,
  circleColor: '#1878ff'
};
const defaultAnchorStyle = {
  iconImage: 'anchor',
  iconAllowOverlap: true,
  iconSize: 1
};

/**
 * Circle props
 *
 * @category Props
 */

/**
  @category Component
 */
const Circle = props => {
  const {
    id,
    onFinish,
    onError,
    circleStyle = defaultCircleStyle,
    anchorStyle = defaultAnchorStyle
  } = props;
  const painter = new _CirclePainter.CirclePainter();
  const {
    map
  } = (0, _react.useContext)(_MapContext.MapContext);
  const toFeatures = async points => {
    const features = [];
    if (points.length > 0) {
      features.push((0, _common.createPointFeature)(points[0], {
        type: 0
      }));
    }
    if (points.length > 1) {
      features.push((0, _common.createPointFeature)(points[1], {
        type: 0
      }));
      const sourcePoint = await map.getPointInView(points[0]);
      const destPoint = await map.getPointInView(points[1]);
      const radius = Math.sqrt(Math.pow(sourcePoint[0] - destPoint[0], 2) + Math.pow(sourcePoint[1] - destPoint[1], 2));
      features.push((0, _common.createPointFeature)(points[0], {
        type: 0,
        radius
      }));
    }
    return features;
  };
  const sourceID = `shape-source-${id}`;
  const circleLayerID = `circle-layer-${id}`;
  const outCircleLayerID = `circle-out-layer-${id}`;
  const innerCircleLayerID = `circle-inner-layer-${id}`;
  const anchorLayerID = `anchor-layer-${id}`;
  return /*#__PURE__*/React.createElement(_Shape.default, {
    id: id,
    paintner: painter,
    toFeatures: toFeatures,
    onError: onError,
    onFinish: onFinish
  }, /*#__PURE__*/React.createElement(_CircleLayer.default, {
    filter: ['all', ['==', ['get', 'type'], 0], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: outCircleLayerID,
    sourceId: sourceID,
    style: defaultOutCircleStyle
  }), /*#__PURE__*/React.createElement(_CircleLayer.default, {
    filter: ['all', ['==', ['get', 'type'], 0], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: innerCircleLayerID,
    sourceId: sourceID,
    style: defaultInnerCircleStyle
  }), /*#__PURE__*/React.createElement(_CircleLayer.default, {
    filter: ['all', ['>', ['get', 'radius'], 0], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: circleLayerID,
    sourceId: sourceID,
    style: circleStyle
  }), /*#__PURE__*/React.createElement(_SymbolLayer.default, {
    filter: ['all', ['==', ['get', 'type'], 1], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: anchorLayerID,
    sourceId: sourceID,
    style: anchorStyle
  }));
};
var _default = exports.default = Circle;
//# sourceMappingURL=Circle.js.map