import React from 'react';

import { AnnotationElementPropsType } from '../../constants/type';
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}px`,
              left: `${annotRect.left}px`,
              width: `${annotRect.width}px`,
              height: `${annotRect.height}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;