import { ScaleLinear } from 'd3-scale'
import * as shape from 'd3-shape'
import { isInteger } from 'lodash'
import React from 'react'
import { Path } from 'react-native-svg'

interface DataPoint {
  x: number
  y: number
}

const getLine = (
  yValues: number[],
  scaleX: ScaleLinear<number, number>,
  scaleY: ScaleLinear<number, number>
): string | null =>
  shape
    .line<DataPoint>()
    .x((p) => scaleX(p.x) ?? 0)
    .y((p) => scaleY(p.y) ?? 0)
    .defined((p) => isInteger(p.y))
    .curve(shape.curveMonotoneX)(yValues.map((y, x) => ({ y, x })))

export function LinePlot<T>({
  strokeColor,
  strokeWidth,
  data,
  scaleX,
  scaleY,
  valueExtractor,
}: {
  strokeColor: string
  strokeWidth: number
  data: T[]
  scaleX: ScaleLinear<number, number>
  scaleY: ScaleLinear<number, number>
  valueExtractor: (v: T) => number
}): React.ReactElement | null {
  const d = getLine(data.map(valueExtractor), scaleX, scaleY)

  return d != null ? (
    <Path
      d={d}
      fill="transparent"
      stroke={strokeColor}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
    />
  ) : null
}