import { scaleLinear } from 'd3-scale'
import React from 'react'
import { LayoutChangeEvent, View } from 'react-native'
import Svg, { Defs, G } from 'react-native-svg'

export interface Size {
  width: number
  height: number
}

export interface Padding {
  left: number
  right: number
  top: number
  bottom: number
}

interface DataSet {
  domain: [number, number]
}

export function useFigure({
  size,
  dataLength,
  plotPadding,
  dataSets,
}: {
  size: Size
  dataLength: number
  plotPadding: Padding
  dataSets: DataSet[]
}) {
  const padding = {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  }

  const contentSize = {
    width: size.width - padding.left - padding.right,
    height: size.height - padding.top - padding.bottom,
  }

  const scaleX = scaleLinear()
    .domain([0, dataLength - 1])
    .range([plotPadding.left, contentSize.width - plotPadding.right])

  const scaleY = dataSets.map(({ domain }) =>
    scaleLinear()
      .domain(domain)
      .range([contentSize.height - plotPadding.top, plotPadding.bottom])
      .nice(4)
  )

  return { contentSize, padding, scaleX, scaleY, Figure }
}

export const Figure: React.FC<{
  onLayout: (e: LayoutChangeEvent) => void
  size: Size
  patterns?: React.ReactElement
  padding: Padding
}> = ({ onLayout, size, patterns, padding, children }) => {
  return (
    <View style={{ flex: 1 }} onLayout={onLayout}>
      {size.width > 0 && size.height > 0 ? (
        <Svg viewBox={`0 0 ${size.width} ${size.height}`}>
          {patterns != null ? <Defs>{patterns}</Defs> : null}
          <G transform={`translate(${padding.left}, ${padding.top})`}>
            {children}
          </G>
        </Svg>
      ) : null}
    </View>
  )
}