import React, { useLayoutEffect, useState, useRef } from 'react';
import { render } from 'react-dom';
import useUpdateEffect from '@umijs/hooks/es/useUpdateEffect';

import { useOverlay } from '@/hooks';

export interface MarkerProps extends Omit<AMap.MarkerOptions, 'content'> {
  visible?: boolean;
  events?: any;
  size?: AMap.Vector2;
  anchor?: AMap.Anchor;
  moveTo?: {
    duration: number;
    easing?: any;
    autoRotation?: boolean;
  };
}

export const Marker: React.FC<MarkerProps> = ({
  children,
  events,
  visible,
  moveTo,
  ...options
}) => {
  const el = useRef<HTMLDivElement>(document.createElement('div'));
  const [marker] = useState(() => new AMap.Marker(options));

  useOverlay(marker, visible, events, options, [
    'anchor',
    'title',
    'icon',
    'label',
    'draggable',
    'cursor',
    'extData',
    'size',
    'zIndex',
    'offset',
    'angle',
  ]);

  useLayoutEffect(() => {
    if (children) {
      render(<>{children}</>, el.current, () => {
        marker?.setContent(el.current);
      });
    }
  });

  // 更新属性
  useUpdateEffect(() => {
    if (moveTo && options?.position) {
      marker?.moveTo(options?.position, moveTo);
    } else if (options?.position) {
      marker?.setPosition(options?.position);
    }
  }, [marker, JSON.stringify(options.position), JSON.stringify(moveTo)]);

  return null;
};