import { isInteger } from 'lodash'
import React from 'react'
import { Circle } from 'react-native-svg'
import { useComponentLayout } from '../hooks/useComponentLayout'
import { LineData } from '../types/LineData'
import { LinePlot } from './figures/LinePlot'
import { Figure, useFigure } from './figures/useFigure'

interface GraphProps {
  data: LineData[]
  strokeWidth?: number
  selection?: number
  labelHeight?: number
  minY?: number
  maxY?: number
}

export const Graph: React.FC<GraphProps> = ({
  data,
  selection,
  strokeWidth = 2,
  minY,
  maxY,
}) => {
  const circleRadius = strokeWidth * 2
  const plotPadding = {
    left: circleRadius,
    right: circleRadius,
    top: circleRadius,
    bottom: circleRadius,
  }

  const allValues = data
    .flatMap(({ yValues }) => yValues)
    .filter((v) => v != null)
  const minValue = Math.min(...[...allValues, minY].filter((d) => d != null))
  const maxValue = Math.max(...[...allValues, maxY].filter((d) => d != null))

  const [onLayout, layout] = useComponentLayout({
    width: 0,
    height: 0,
    x: 0,
    y: 0,
  })

  const {
    contentSize,
    padding: pad,
    scaleX,
    scaleY,
  } = useFigure({
    size: layout,
    dataLength: data[0].yValues.length,
    plotPadding,
    dataSets: [{ domain: [minValue, maxValue] }],
  })

  const selectedValue = data[0].yValues[selection]

  return (
    <Figure onLayout={onLayout} size={layout} padding={pad}>
      {data.map((d, i) => (
        <LinePlot
          key={i}
          data={d.yValues}
          strokeColor={d.strokeColor}
          strokeWidth={strokeWidth}
          scaleX={scaleX}
          scaleY={scaleY[0]}
          valueExtractor={(v) => v}
        />
      ))}

      {isInteger(selectedValue) && isInteger(selection) ? (
        <Circle
          cx={scaleX(selection)}
          cy={scaleY[0](selectedValue)}
          r={circleRadius}
          fill="white"
        />
      ) : (
        <></>
      )}
    </Figure>
  )
}