import React from 'react'
import { ArrowGenerator } from './arrowGenerator'
import { percentToPixel } from './tools'
import { OffsetAnnotationTypes, alignType } from './types'
import { BaseAnnotationComp } from './baseAnnotationComp'
export const OffsetAnnotation = ({
  position,
  content,
  svgSize = [1, 0],
  offset = [0, 0],
  alignOverwrite,
  Comp = BaseAnnotationComp,
  lineHeight,
  linePadding,
  hideMarker,
  lineFlow = 'flows',
  marker
}: OffsetAnnotationTypes) => {
  const x = percentToPixel(position[0], svgSize[0])
  const y = percentToPixel(position[1], svgSize[1])
  const offX = percentToPixel(offset[0], svgSize[0])
  const offY = percentToPixel(offset[1], svgSize[1])

  let align = 'start' as alignType
  if (x >= x + offX) align = 'end'
  if (alignOverwrite) align = alignOverwrite

  const pathString = ArrowGenerator(
    { x: -offset[0], y: -offset[1] },
    svgSize,
    linePadding || 0,
    lineHeight,
    lineFlow
  )

  return (
    <g transform={'translate(' + x + ',' + y + ')'}>
      <g transform={'translate(' + offX + ',' + offY + ') scale(' + 1 + ')'}>
        <Comp content={content} align={align} lineHeight={lineHeight} />
      </g>
      {(offset[0] || offset[1]) && (
        <g transform={'translate(' + offX + ',' + offY + ')'}>
          {/* {(+offset[0] !== 0 || +offset[1] !== 0) && ( */}
          <path
            // style={{
            //   strokeWidth: Math.abs(offset[0]) >= Math.abs(offset[1]) ? 3 : 1
            // }}
            d={pathString}
            className='arrow'
            fill='none'
            markerEnd={
              !hideMarker ? marker && 'url(#' + marker[1] + ')' : undefined
            }
            markerStart={
              !hideMarker ? marker && 'url(#' + marker[0] + ')' : undefined
            }
          />
          
        </g>
      )}
    </g>
  )
}