import React from 'react';
import { G, Line } from 'react-native-svg';
import { useTheme } from '../../../theme';
import type { AxisCoordinates, XAxisConfig } from '../types';
import { DASH_ARRAY } from './constants';
import useScaleBandX from './hooks/useScaleBandX';

export type XAxisGridProps = {
  xAxisConfig: XAxisConfig;
  coordinates: AxisCoordinates;
};

const XAxisGrid = ({ xAxisConfig, coordinates }: XAxisGridProps) => {
  const { xStart, xEnd, yEnd } = coordinates;
  const theme = useTheme();
  const { labels = [] } = xAxisConfig;

  const {
    colors: { gridStroke },
  } = theme.__hd__.chart;

  const scaleX = useScaleBandX({ labels, xStart, xEnd });

  return (
    <G testID="x-axis-grid">
      {labels.map((label) => (
        <Line
          testID={`x-axis-grid-${label}`}
          key={label}
          x1={(scaleX(label) || 0) + scaleX.bandwidth() / 2}
          y1={0}
          x2={(scaleX(label) || 0) + scaleX.bandwidth() / 2}
          y2={yEnd}
          stroke={gridStroke}
          strokeDasharray={DASH_ARRAY}
        />
      ))}
    </G>
  );
};

export default XAxisGrid;