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

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

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

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

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