/** @format */

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

import { createInfoWindow } from '../../../utils/index';

interface Basic2DMapMarkerProps {
  map: any;
  infoWindow?: any;
  windows?: any;
  data: any;
  label: any;
  parentId: string;
  series: any;
  iconSet: any;
}

const Basic2DMapMarker = (props: Basic2DMapMarkerProps) => {
  const {
    parentId = '1',
    data = [],
    label,
    series,
    iconSet,
    windows = {
      isSelfSet: false,
      textStyle: {
        fontSize: 12,
        color: 'yellow',
        fontWeight: 500,
        fontFamily: '微软雅黑',
        shadow: 'black',
      },
      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 [newData, setNewData] = useState();

  let markerArr: any;
  useEffect(() => {
    let newData;
    if (data && data.length > 0) {
      newData = data.map((d: any) => {
        d.iconSrc = iconSet.baseIcon;
        d.baseIconHeight = iconSet.baseIconHeight;
        d.baseIconWidth = iconSet.baseIconWidth;
        d.baseIconOffsetHeight = iconSet.baseIconOffsetHeight;
        d.baseIconOffsetWidth = iconSet.baseIconOffsetWidth;
        return d;
      });
      series.map((val: any) => {
        newData = data.map((d: any) => {
          if (d.type === val.type) {
            d.iconSrc = val.iconSrc;
            d.baseIconHeight = val.iconHeight;
            d.baseIconWidth = val.iconWidth;
            d.baseIconOffsetHeight = val.offsetHeight;
            d.baseIconOffsetWidth = val.offsetWidth;
          }
          return d;
        });
      });
    }
    setNewData(newData);
  }, [data, series, iconSet]);

  useEffect(() => {
    if (!window.__map2d[parentId]?.map) return;
    const marks = buildMarker(newData);
    markerArr = marks;
  }, [window.__map2d[parentId]?.map, newData]);

  useEffect(() => {
    if (!window.__map2d[parentId]?.map || windows.isSelfSet || !windows) return;
    markerArr &&
      markerArr.forEach((item: any) => {
        item.on('click', markerClick);
      });
  }, [windows, markerArr]);

  // useEffect(() => {
  //   if (! window.__map2d[parentId]?.map || windows.isSelfSet || !windows) return;
  //   markerArr &&
  //     markerArr.forEach((item: any) => {
  //       item.setLabel({
  //         offset: new AMap.Pixel(label.offsetWidth, label.offsetHeight), //设置文本标注偏移量
  //         content: `<div style="font-size:${label.fontSize}px;color:${label.color};font-family:${label.fontFamily};font-weight:${label.fontWeight}">${item.name}</div>`, //设置文本标注内容
  //         direction: label.position, //设置文本标注方位
  //       });
  //     });
  // }, [label]);

  //关闭信息窗体
  function closeInfoWindow() {
    window.__map2d[parentId]?.map.clearInfoWindow();
  }

  function markerClick(e: any) {
    const infoWindow = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      content: createInfoWindow(
        e.target.title,
        e.target.content,
        closeInfoWindow,
        windows,
      ),
      offset: new AMap.Pixel(0, -0),
    });
    infoWindow.open(window.__map2d[parentId]?.map, e.target.getPosition());
  }

  // 构造点标记
  function buildMarker(markers: any) {
    const markersRes: any = [];
    try {
      markers &&
        markers.length > 0 &&
        markers.forEach(function(marker: any) {
          const data = new AMap.Marker({
            map: window.__map2d[parentId]?.map,
            position: [marker.lng, marker.lat],
            offset: new AMap.Pixel(
              marker.baseIconOffsetWidth || 0,
              marker.baseIconOffsetHeight || 0,
            ),
            icon: new AMap.Icon({
              image: marker.iconSrc,
              size: new AMap.Size(52, 52),
              imageSize: new AMap.Size(
                marker.baseIconWidth || 20,
                marker.baseIconHeight || 20,
              ), //图标大小
            }),
          });
          data.info = marker.info;
          data.content = marker.content;
          data.title = marker.title;
          data.name = marker.name;
          markersRes.push(data);
        });
    } catch (e) {
      console.error(e);
    }

    return markersRes;
  }

  return null;
};

export default Basic2DMapMarker;