import React from 'react'
import { StyleProp, View, ViewStyle } from 'react-native'
import { colorsV2 } from '../Colors'

/**
 * Set of lines for the Y axis axes of a graph
 */
export const GraphYAxisAxes: React.FC<{
  style?: StyleProp<ViewStyle>
  lineStyle?: StyleProp<ViewStyle>
  dividers?: number
}> = ({ style, lineStyle, dividers }) => {
  const defaultLineStyle: StyleProp<ViewStyle> = {
    height: 1,
    backgroundColor: colorsV2.metals.metal0,
  }
  return (
    <View
      style={[
        {
          position: 'absolute',
          width: '100%',
          height: '100%',
          zIndex: -1,
        },
        style,
      ]}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          flexDirection: 'column-reverse',
        }}
      >
        <View style={[defaultLineStyle, lineStyle]} />
        {[...Array(dividers ?? 1)].map((_, index) => (
          <View key={index} style={[defaultLineStyle, lineStyle]} />
        ))}
        <View style={[defaultLineStyle, lineStyle]} />
      </View>
    </View>
  )
}