import React, { useCallback, useMemo } from 'react';
import RectInfo from './RectInfo';
import { computedZIndex } from './utils';
import './index.less';

export default function DefaultRects({ rects, containerDom, onClickRect, getRectImage }) {
  const renderRects = useMemo(() => computedZIndex(rects), [rects]);
  const rectClick = useCallback(
    (e, item) => {
      e.stopPropagation();
      onClickRect && onClickRect({ ...item, base64: getRectImage(item.rect) });
    },
    [getRectImage, onClickRect]
  );

  return renderRects.map((v, k) => {
    return (
      <div className={`rect-item-wrapper rect-item-${v.type}-wrapper`} key={k}>
        <div
          className={'rect-item'}
          onDoubleClick={e => rectClick(e, v)}
          style={{
            left: v.rect[0],
            top: v.rect[1],
            width: v.rect[2],
            height: v.rect[3],
            zIndex: k
          }}
        >
          <div className="border-top-decorator" />
          <div className="border-bottom-decorator" />
        </div>
        {Array.isArray(v.tags) && v.tags.length > 0 && <RectInfo item={v} containerDom={containerDom} />}
      </div>
    );
  });
}
