/** @format */

import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';

interface Basic2DMapProps {
  size: any;
  mapZoom?: number;
  centerLongitude?: number;
  centerLatitude?: number;
  plottingScaleShow?: boolean;
  windows?: any;
  id: string;
  global?: any;
}
//
const Basic2DMap = (props: Basic2DMapProps) => {
  const {
    size = { width: 500, height: 500 },
    global = {
      mapZoom: 4,
      centerLongitude: 116.305467,
      centerLatitude: 39.807761,
      plottingScaleShow: true,
    },
    id = '1',
    windows = {
      textStyle: {
        fontSize: 12,
        color: 'black',
        fontWeight: 500,
        fontFamily: '微软雅黑',
      },
      lineHeight: 15,
      borderRadius: 5,
      padding: {
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        paddingRight: 5,
      },
      background: 'red',
      close: {
        color: 'white',
        size: 10,
        marginTop: 5,
        marginRight: 5,
      },
    },
  } = props;
  const [scale, setScale] = useState();

  useEffect(() => {
    if (!window.__map2d[id]?.map) return;
    window.__map2d[id] = Object.assign(window.__map2d[id], {
      size: size,
    });
    setZoom(global.mapZoom);
  }, [window.__map2d[id]?.map, global.mapZoom, size]);

  useEffect(() => {
    if (!window.__map2d[id]?.map) return;
    setCenter(global.centerLongitude, global.centerLatitude);
  }, [window.__map2d[id]?.map, global.centerLongitude, global.centerLatitude]);
  // 比例尺
  useEffect(() => {
    if (!window.__map2d[id]?.map) return;
    const scale = new AMap.Scale({
      visible: global.plottingScaleShow,
    });
    setScale(scale);
    window.__map2d[id]?.map.addControl(scale);
  }, [window.__map2d[id]?.map]);

  useEffect(() => {
    if (!window.__map2d[id]?.map || !scale) return;
    if (global.plottingScaleShow) {
      scale?.show();
    } else {
      scale?.hide();
    }
  }, [global.plottingScaleShow]);

  useEffect(() => {
    if (!window.__map2d[id]?.map) return;
    window.__map2d[id].setInfoWindowFunc(windows);
  }, [window.__map2d[id]?.map, windows]);

  //设置地图层级
  function setZoom(zoom: number) {
    window.__map2d[id]?.map?.setZoom(zoom);
  }
  //设置地图中心点
  function setCenter(lng: number, lat: number) {
    window.__map2d[id]?.map?.setCenter([lng, lat]);
  }

  return <div style={size}></div>;
};

export default Basic2DMap;