import React, { useState, useMemo } from 'react';
import { useOverlay } from '@/hooks';
import useUpdateEffect from '@umijs/hooks/es/useUpdateEffect';

interface MassMarkersStyleOptions
  extends Omit<AMap.MassMarkersStyleOptions, 'anchor' | 'size'> {
  size: AMap.Vector2;
  anchor: AMap.Vector;
}

interface MassMarksProps extends Omit<AMap.MassMarkersOptions, 'style'> {
  events?: any;
  visible?: boolean;
  data: { lnglat: AMap.Vector2; style: number }[];
  style?: MassMarkersStyleOptions | MassMarkersStyleOptions[];
}

export const MassMarks: React.FC<MassMarksProps> = ({
  events,
  visible,
  data,
  style,
  ...opts
}) => {
  const parseStyle: AMap.MassMarkersStyleOptions = useMemo(() => {
    const nextStyle: any = Array.isArray(style)
      ? style
      : style
      ? [style]
      : undefined;

    if (nextStyle) {
      return nextStyle.map((s: MassMarkersStyleOptions) => ({
        ...s,
        ...(s.anchor && s.anchor.length >= 2
          ? { anchor: new AMap.Pixel(s.anchor[0], s.anchor[1]) }
          : {}),
        ...(s.size ? { size: new AMap.Size(...s.size) } : {}),
      }));
    }
  }, [style]);

  const parseData = useMemo(() => {
    return data.map(item => ({
      ...item,
      lnglat: new AMap.LngLat(...item.lnglat),
      style: item.style || 0,
    }));
  }, [data]);

  const [massMarks] = useState(() => {
    return new AMap.MassMarks(parseData, {
      ...opts,
      style: parseStyle,
    });
  });

  useOverlay(massMarks, visible, events, opts, ['opacity', 'zIndex', 'zooms']);

  useUpdateEffect(() => {
    if (typeof (massMarks as any).setData === 'function') {
      (massMarks as any).setData(parseData);
    }
  }, [parseData, massMarks]);

  return null;
};