import React, { useState } from 'react';
import { useOverlay } from '@/hooks';
import { Editor } from '@/tools';

export interface PolygonProps extends AMap.PolygonOptions {
  visible?: boolean;
  editable?: boolean;
  editorEvents?: any;
  events?: any;
}

export const Polygon: React.FC<PolygonProps> = ({
  events,
  editorEvents,
  visible,
  editable,
  path,
  extData,
  ...options
}) => {
  const [polygon] = useState(
    () => new AMap.Polygon({ ...options, extData, path }),
  );

  useOverlay(polygon, visible, events, { path, extData, options }, [
    'path',
    'extData',
    'options',
  ]);

  return (
    <>
      {editable && (
        <Editor name="PolygonEditor" overlay={polygon} events={editorEvents} />
      )}
    </>
  );
};