"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _react = require("react");
var _common = require("../../utils/common");
var _modules = require("../../modules");
var _Images = _interopRequireDefault(require("../image/Images"));
var _GeoJSONSource = _interopRequireDefault(require("../GeoJSONSource"));
var _LineLayer = _interopRequireDefault(require("../LineLayer"));
var _CircleLayer = _interopRequireDefault(require("../CircleLayer"));
var _SymbolLayer = _interopRequireDefault(require("../SymbolLayer"));
var _DrawControl = _interopRequireDefault(require("./DrawControl"));
var _FillLayer = _interopRequireDefault(require("../FillLayer"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// import anchorImage from '../../assets/plus.png';

const anchorImage = require('../../assets/plus.png');
var FeatureType = /*#__PURE__*/function (FeatureType) {
  FeatureType[FeatureType["Data"] = 0] = "Data";
  FeatureType[FeatureType["Anchor"] = 1] = "Anchor";
  return FeatureType;
}(FeatureType || {});
const defaultLineStyle = {
  lineColor: '#f00',
  lineWidth: 2
};
const defaultOutCircleStyle = {
  circleRadius: 8,
  circleStrokeColor: '#1878ff',
  circleStrokeWidth: 2,
  circleColor: 'transparent'
};
const defaultInnerCircleStyle = {
  circleRadius: 3,
  circleColor: '#1878ff'
};
const defaultAnchorStyle = {
  iconImage: 'anchor',
  iconAllowOverlap: true,
  iconSize: 1
};
const defaultFillStyle = {
  fillColor: '#8c8af5',
  fillOpacity: 0.7
};

/**
 * Shape props
 *
 * @category Props
 */

/**
  @category Component
 */
const Shape = props => {
  const {
    id,
    lineStyle = defaultLineStyle,
    outCircleStyle = defaultOutCircleStyle,
    innerCircleStyle = defaultInnerCircleStyle,
    anchorStyle = defaultAnchorStyle,
    fillStyle = defaultFillStyle,
    paintner,
    children,
    toFeatures,
    onFinish: onDrawFinish,
    onError
  } = props;
  const {
    map
  } = (0, _react.useContext)(_modules.MapContext);
  const [features, setFeatures] = (0, _react.useState)([]);
  const displayFeatures = async points => {
    const drawingFeatures = [];
    drawingFeatures.push(...(await toFeatures(points)));
    // 在地图中心位置添加锚点
    const center = await map.getCenter();
    drawingFeatures.push((0, _common.createPointFeature)(center, {
      type: FeatureType.Anchor
    }));
    setFeatures(drawingFeatures);
    console.log('displayFeatures', JSON.stringify(drawingFeatures));
  };
  const shapePainter = (0, _react.useRef)(paintner);
  shapePainter.current.onChange = displayFeatures;
  const onUndo = () => {
    shapePainter.current.undo();
  };
  const onAdd = async e => {
    const center = await map.getCenter();
    const postion = e?.geometry?.coordinates || center;
    shapePainter.current.addPoint(postion);
  };
  const onFinish = () => {
    const data = shapePainter.current.getData();
    if (!data) {
      onError?.({
        message: '绘制未结束，无法获取轨迹信息'
      });
    } else {
      onDrawFinish?.(data);
    }
  };
  (0, _react.useEffect)(() => {
    map.on('onPress', onAdd);
    map.on('cameraChanged', () => {
      const points = shapePainter.current.getData() || [];
      displayFeatures(points);
    });
    displayFeatures([]);
  }, [map]);
  const sourceID = `shape-source-${id}`;
  const layerID = `shape-layer-${id}`;
  const outCircleLayerID = `circle-out-layer-${id}`;
  const innerCircleLayerID = `circle-inner-layer-${id}`;
  const anchorLayerID = `anchor-layer-${id}`;
  const fillLayerID = `fill-layer-${id}`;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Images.default, {
    images: {
      anchor: anchorImage
    }
  }), /*#__PURE__*/React.createElement(_GeoJSONSource.default, {
    id: sourceID,
    url: {
      type: 'FeatureCollection',
      features: features
    }
  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_LineLayer.default, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'LineString']],
    slot: "top",
    id: layerID,
    sourceId: sourceID,
    style: lineStyle
  }), /*#__PURE__*/React.createElement(_CircleLayer.default, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: outCircleLayerID,
    sourceId: sourceID,
    style: outCircleStyle
  }), /*#__PURE__*/React.createElement(_CircleLayer.default, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: innerCircleLayerID,
    sourceId: sourceID,
    style: innerCircleStyle
  }), /*#__PURE__*/React.createElement(_SymbolLayer.default, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Anchor], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: anchorLayerID,
    sourceId: sourceID,
    style: anchorStyle
  }), /*#__PURE__*/React.createElement(_FillLayer.default, {
    slot: "top",
    id: fillLayerID,
    sourceId: sourceID,
    filter: ['all', ['==', ['geometry-type'], 'Polygon'], ['==', ['get', 'type'], FeatureType.Data]],
    style: fillStyle
  }))), /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.control
  }, /*#__PURE__*/React.createElement(_DrawControl.default, {
    onUndo: onUndo,
    onAdd: onAdd,
    onFinish: onFinish
  })));
};
var _default = exports.default = Shape;
const styles = _reactNative.StyleSheet.create({
  control: {
    position: 'absolute',
    bottom: 15,
    width: '100%'
  },
  icon: {
    // backgroundColor: '#000',
    width: 50,
    height: 30,
    fontWeight: '700',
    color: '#F00'
  }
});
//# sourceMappingURL=Shape.js.map