/* 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.FC<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: unknown, index: number) => {
        const annotRect = rectCalc(ele as PositionType, viewport.height, scale);

        return (
          <Markup
            id={id}
            key={`block_${page + index}`}
            position={{
              top: annotRect.top,
              left: annotRect.left,
              width: annotRect.width,
              height: annotRect.height,
            }}
            bdcolor={bdcolor || ''}
            opacity={transparency || 0}
            markupType={obj_type}
            isCovered={isCovered}
            scale={scale}
            onMouseOver={onMouseOver}
            onMouseOut={onMouseOut}
          />
        );
      })}
    {!isCollapse ? (
      <Popper position={mousePosition as PointType}>
        <AnnotationOptions
          onUpdate={onUpdate}
          onDelete={onDelete}
          colorProps={bdcolor}
          opacityProps={transparency ? strip(transparency * 100) : 0}
        />
      </Popper>
    ) : null}
  </>
);

export default Highlight;