/** @format */

import _ from 'lodash';
import { useEffect } from 'react';

interface AmapBoxProps {
  background: string; // 多边形填充颜色
  borderWidth: number; // 线条宽度，默认为 1
  borderColor: string; // 线条颜色
  data: {
    lat: number;
    lng: number;
  }[];
  parentId: string;
}

const Basic2DMapAreaPolygon = (props: AmapBoxProps) => {
  const {
    parentId = '1',
    background = 'fff',
    borderWidth = 2,
    borderColor = 'red',
    data = [
      {
        lat: 31.8998,
        lng: 102.2212,
      },
      {
        lat: 28.6542,
        lng: 120.079,
      },
      {
        lat: 24.0554,
        lng: 114.207,
      },
    ],
  } = props;
  const path =
    data &&
    data.length > 0 &&
    data.map(item => {
      return new AMap.LngLat(item.lng, item.lat);
    });

  useEffect(() => {
    if (!window.__map2d[parentId]?.map) return;
    const polygon = new AMap.Polygon({
      path: path,
      fillColor: background, // 多边形填充颜色
      borderWeight: borderWidth, // 线条宽度，默认为 1
      strokeColor: borderColor, // 线条颜色
    });
    window.__map2d[parentId]?.map.add(polygon);

    // 调试用
    // window[id]?.map.setFitView();
  }, [
    window.__map2d[parentId]?.map,
    data,
    background,
    borderWidth,
    borderColor,
  ]);

  return null;
};

export default Basic2DMapAreaPolygon;