import { View, StyleSheet } from 'react-native';
import { useContext, useEffect, useRef, useState } from 'react';
import { createPointFeature } from '../../utils/common';
import { MapContext } from '../../modules';
import Images from '../image/Images';
// import anchorImage from '../../assets/plus.png';
import GeoJSONSource from '../GeoJSONSource';
import LineLayer from '../LineLayer';
import CircleLayer from '../CircleLayer';
import SymbolLayer from '../SymbolLayer';
import DrawControl from './DrawControl';
import FillLayer from '../FillLayer';
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
  } = useContext(MapContext);
  const [features, setFeatures] = useState([]);
  const displayFeatures = async points => {
    const drawingFeatures = [];
    drawingFeatures.push(...(await toFeatures(points)));
    // 在地图中心位置添加锚点
    const center = await map.getCenter();
    drawingFeatures.push(createPointFeature(center, {
      type: FeatureType.Anchor
    }));
    setFeatures(drawingFeatures);
    console.log('displayFeatures', JSON.stringify(drawingFeatures));
  };
  const shapePainter = 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);
    }
  };
  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, {
    images: {
      anchor: anchorImage
    }
  }), /*#__PURE__*/React.createElement(GeoJSONSource, {
    id: sourceID,
    url: {
      type: 'FeatureCollection',
      features: features
    }
  }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LineLayer, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'LineString']],
    slot: "top",
    id: layerID,
    sourceId: sourceID,
    style: lineStyle
  }), /*#__PURE__*/React.createElement(CircleLayer, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: outCircleLayerID,
    sourceId: sourceID,
    style: outCircleStyle
  }), /*#__PURE__*/React.createElement(CircleLayer, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Data], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: innerCircleLayerID,
    sourceId: sourceID,
    style: innerCircleStyle
  }), /*#__PURE__*/React.createElement(SymbolLayer, {
    filter: ['all', ['==', ['get', 'type'], FeatureType.Anchor], ['==', ['geometry-type'], 'Point']],
    slot: "top",
    id: anchorLayerID,
    sourceId: sourceID,
    style: anchorStyle
  }), /*#__PURE__*/React.createElement(FillLayer, {
    slot: "top",
    id: fillLayerID,
    sourceId: sourceID,
    filter: ['all', ['==', ['geometry-type'], 'Polygon'], ['==', ['get', 'type'], FeatureType.Data]],
    style: fillStyle
  }))), /*#__PURE__*/React.createElement(View, {
    style: styles.control
  }, /*#__PURE__*/React.createElement(DrawControl, {
    onUndo: onUndo,
    onAdd: onAdd,
    onFinish: onFinish
  })));
};
export default Shape;
const styles = StyleSheet.create({
  control: {
    position: 'absolute',
    bottom: 15,
    width: '100%'
  },
  icon: {
    // backgroundColor: '#000',
    width: 50,
    height: 30,
    fontWeight: '700',
    color: '#F00'
  }
});
//# sourceMappingURL=Shape.js.map