import React, { useCallback, useMemo } from 'react';
import RectMenu from '../RectMenu';
import './index.less';

export default function DrawRect({ rect = [], canRenderMenu, containerDom, onMenuClick, menus, getRectImage }) {
  const x = useMemo(() => rect[0] + rect[2], [rect]);
  const y = useMemo(() => rect[1] + rect[3], [rect]);

  const onMenuClickAction = useCallback(
    item => {
      onMenuClick && onMenuClick({ ...item, base64: getRectImage(rect) });
    },
    [getRectImage, onMenuClick, rect]
  );
  return (
    <>
      <div
        className="select-rect-layout"
        style={{
          left: rect[0],
          top: rect[1],
          width: rect[2],
          height: rect[3]
        }}
      ></div>
      {canRenderMenu && <RectMenu x={x} y={y} containerDom={containerDom} onMenuClick={onMenuClickAction} menus={menus} />}
    </>
  );
}
