/* eslint-disable jsx-a11y/mouse-events-have-key-events */
import React from 'react';

import AnnotationOptions from '../AnnotationOptions';
import Markup from '../Markup';
import { rectCalc } from '../../helpers/position';
import { strip } from '../../helpers/utility';

import { Popper } from './styled';

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

        return (
          <Markup
            id={id}
            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}
            scale={scale}
            onMouseOver={onMouseOver}
            onMouseOut={onMouseOut}
          />
        );
      })}
    {!isCollapse ? (
      <Popper position={mousePosition}>
        <AnnotationOptions
          onUpdate={onUpdate}
          onDelete={onDelete}
          colorProps={bdcolor}
          opacityProps={transparency ? strip(transparency * 100) : 0}
        />
      </Popper>
    ) : null}
  </>
);

export default Highlight;