import React, { useMemo } from 'react';
import IconFont from '../../../../themeComponents/IconFont';

const RECT_INFO_WIDTH = 150;
const RECT_INFO_HEIGHT = 24;
const RECT_WINDOW_MARGIN = 6;

function RectInfo({ item, containerDom }) {
  const position = useMemo(() => {
    const { width, height } = containerDom.getBoundingClientRect();
    const { rectInfoWidth, rectInfoHeight } = {
      rectInfoWidth: RECT_INFO_WIDTH,
      rectInfoHeight: item.tags.length * RECT_INFO_HEIGHT + 6 + 30
    };
    const [rectLeft, rectTop, rectWidth] = item.rect;
    let x, y;
    if (rectWidth + rectLeft + rectInfoWidth < width) {
      x = rectWidth + rectLeft + RECT_WINDOW_MARGIN;
    } else {
      x = rectLeft - RECT_WINDOW_MARGIN - rectInfoWidth;
    }
    if (rectTop + rectInfoHeight < height) {
      y = rectTop;
      y = y < 0 ? RECT_WINDOW_MARGIN : y;
    } else {
      y = height - rectInfoHeight;
    }
    return { x, y, width: rectInfoWidth, height: rectInfoHeight };
  }, [containerDom, item.rect, item.tags.length]);
  return (
    <div
      className="rect-info-list-wrapper"
      style={{
        left: position.x,
        top: position.y,
        width: position.width,
        height: position.height
      }}
    >
      <div className="data-type">
        {item.hasOwnProperty('lowQuality') && <span className="data-tag low">
          <IconFont type={'icon-S_View_Cluster'} />
          {item.lowQuality ? '低质量' : '高质量'}
        </span>}
        {item.hasOwnProperty('dupId') && item.dupId && <span className="data-tag repeat">
          <IconFont type={'icon-S_Photo_repeatingdata'} />重复
        </span>}
      </div>
      <ul className="rect-info-list">
        {item.tags.map((v, index) => (
          <li className="info-item" key={index} title={v.tagLabel}>
            <IconFont type={v.icon} />
            <span className="item-value">{v.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default RectInfo;
