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

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

export const Circle: React.FC<CircleProps> = ({
  events,
  editorEvents,
  visible,
  editable,
  center,
  radius,
  extData,
  ...options
}) => {
  const [circle] = useState(
    () => new AMap.Circle({ ...options, extData, center, radius }),
  );

  useOverlay(circle, visible, events, { center, radius, extData, options }, [
    'center',
    'radius',
    'extData',
    'options',
  ]);

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