import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useRef, useCallback, useEffect } from 'react';
import WauMap from '../wau-map';
import { jsx as _jsx } from "react/jsx-runtime";
const WauMapCircle = ({
  onChange,
  center,
  radius = 120,
  ...props
}) => {
  const mapRef = useRef();
  const markerLayerRef = useRef();
  const centerRef = useRef([]);
  const circleRef = useRef();
  const drawCircle = useCallback(latLng => {
    var _circleRef$current;
    (_circleRef$current = circleRef.current) === null || _circleRef$current === void 0 ? void 0 : _circleRef$current.updateGeometries([{
      id: '1',
      styleId: 'circle',
      center: latLng,
      radius
    }]);
  }, [radius]);
  const handleInitialize = useCallback((map, center) => {
    mapRef.current = map;
    if (center.length) {
      const markerLayer = new window.TMap.MultiMarker({
        id: 'marker-layer',
        map
      });
      markerLayer.add({
        position: new window.TMap.LatLng(...center)
      });
      markerLayerRef.current = markerLayer;
      // 画圈
      circleRef.current = new window.TMap.MultiCircle({
        map,
        styles: {
          // 设置圆形样式
          circle: new window.TMap.CircleStyle({
            color: 'rgba(41,91,255,0.16)',
            showBorder: true,
            borderColor: 'rgba(41,91,255,1)',
            borderWidth: 2
          })
        }
      });
      onChange === null || onChange === void 0 ? void 0 : onChange(center);
      drawCircle(new window.TMap.LatLng(...center));
    }
  }, [drawCircle, onChange]);
  const handleMapClick = useCallback(evt => {
    const markerLayer = markerLayerRef.current;
    if (markerLayer) {
      drawCircle(evt.latLng);
      markerLayer.setGeometries([]);
      centerRef.current = [evt.latLng.lat, evt.latLng.lng];
      markerLayer.add({
        position: evt.latLng
      });
      onChange === null || onChange === void 0 ? void 0 : onChange(centerRef.current);
    }
  }, [drawCircle, onChange]);
  useEffect(() => {
    const map = mapRef.current;
    const markerLayer = markerLayerRef.current;
    if (map && markerLayer && center && (center === null || center === void 0 ? void 0 : center.length) > 0) {
      drawCircle(new window.TMap.LatLng(...center));
      markerLayer.setGeometries([]);
      markerLayer.add({
        position: new window.TMap.LatLng(...center)
      });
      setTimeout(() => {
        map.setCenter(new window.TMap.LatLng(...(center || [])));
      });
    }
  }, [drawCircle, center]);
  return /*#__PURE__*/_jsx(WauMap, {
    center: center,
    ...props,
    onInitialize: handleInitialize,
    onMapClick: handleMapClick
  });
};
export default WauMapCircle;