import {
  FC,
} from 'react'

type lineFlow = 'straight' | 'flows' | 'curves'
type markerTypes = 'none' | 'dot' | 'arrow'
export type alignType = 'start' | 'middle' | 'end'
export interface AnnotationData {
  x: number
  y: number
  content: { [key: string]: any } | string
  offsetX?: number
  offsetY?: number
  align: alignType
}

export interface OffsetAnnotationTypes {
  position: [number, number]
  content: { [key: string]: any } | string
  svgSize: number[]
  Comp?: FC<AnnotationComponentProps>
  offset?: [number, number]
  alignOverwrite?: alignType
  lineHeight: number
  linePadding?: number
  lineFlow?: lineFlow
  marker?: markerTypes[]
  hideMarker?: boolean
}

export interface AnnotationComponentProps {
  content: { [key: string]: any } | string
  align: alignType
  lineHeight: number
}
export interface AnnotationLayerTypes {
  /** Array containing the annotations as objects */
  annotations: AnnotationData[]

  /** Element which should receive the annotations. */
  children: React.Component | React.FunctionComponent

  /** Custom Component for annotation. SVG-Elements only.    */
  AnnotationComponent?: React.FC<AnnotationComponentProps>

  /** Id property for the annotation layer container  */
  id?: string

  /** If true the center and a tooltip for reading positions are displayed  */
  locator?: boolean

  /** Custom line spaceing for the text and the start of the line to annotation */
  lineHeight?: number

  /** Custom  spaceing from line to start- and endpoint */
  linePadding?: number

  lineFlow?: lineFlow
  /** Set markers for start and end of line */
  marker?: ('none' | 'dot' | 'arrow')[]

  /** draw lines without markers at the end */
  hideMarker?: boolean
}
export interface BaseAnnotationComponentProps {
  content: { [key: string]: any } | string
  align: alignType
  lineHeight: number
}