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

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

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

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

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