import React from 'react';

import AnnotationSelector from '../AnnotationSelector';
import Markup from '../Markup';
import { rectCalc } from '../../helpers/position';

import { Popper } from './styled';

const Highlight: React.SFC<AnnotationElementPropsType> = ({
  obj_type,
  obj_attr: { page, position, bdcolor, transparency },
  isCovered,
  mousePosition,
  isCollapse,
  onUpdate,
  onDelete,
  scale,
  viewport,
}: AnnotationElementPropsType) => (
  <>
    {Array.isArray(position) &&
      position.map((ele: any, index: number) => {
        const annotRect = rectCalc(ele, viewport.height, scale);

        return (
          <Markup
            key={`block_${page + index}`}
            position={{
              top: `${annotRect.top.toFixed(2)}px`,
              left: `${annotRect.left.toFixed(2)}px`,
              width: `${annotRect.width.toFixed(2)}px`,
              height: `${annotRect.height.toFixed(2)}px`,
            }}
            bdcolor={bdcolor || ''}
            opacity={transparency || 0}
            markupType={obj_type}
            isCovered={isCovered}
          />
        );
      })}
    {!isCollapse ? (
      <Popper position={mousePosition}>
        <AnnotationSelector
          onUpdate={onUpdate}
          onDelete={onDelete}
          colorProps={bdcolor}
          opacityProps={transparency ? transparency * 100 : 0}
        />
      </Popper>
    ) : (
      ''
    )}
  </>
);

export default Highlight;