import React, { useMemo } from 'react';
import { line, curveBasis } from 'd3';
import { Path } from 'react-native-svg';
import { DEFAULT_LINE_STROKE_WIDTH } from '../shared/constants';
import useScaleBandX from '../shared/hooks/useScaleBandX';
import useScaleLinearY from '../shared/hooks/useScaleLinearY';
import type { AxisCoordinates, DataValue } from '../types';
import { useTheme } from '../../../theme';

/**
 * Props for the Line chart component
 */
type LineProps = {
  /** Array of data points to be plotted on the line chart */
  data: DataValue[];
  /** Maximum value for the Y-axis scale */
  maxValue: number;
  /** Minimum value for the Y-axis scale */
  minValue: number;
  /** Array of labels for the X-axis points */
  labels: string[];
  /** Coordinates defining the chart's boundaries and scale */
  coordinates: AxisCoordinates;
  /** Color for the line */
  color?: string;
  /** Test ID for the line */
  testID?: string;
};

const Line = ({
  data,
  maxValue,
  minValue,
  labels,
  coordinates,
  color,
  testID,
}: LineProps) => {
  const { xStart, xEnd, yStart, yEnd } = coordinates;
  const theme = useTheme();

  // Create scales
  const xScale = useScaleBandX({
    labels,
    xStart,
    xEnd,
  });

  const yScale = useScaleLinearY({
    maxValue,
    minValue,
    yStart,
    yEnd,
  });

  // Create line generator with proper curve
  const lineGenerator = useMemo(
    () =>
      line<DataValue>()
        .x((_, i) => (xScale(labels[i]) ?? 0) + xScale.bandwidth() / 2)
        .y((d) => yScale(d ?? 0))
        .curve(curveBasis),
    [xScale, yScale, labels]
  );

  // Generate path data
  const pathData = useMemo(() => lineGenerator(data), [data, lineGenerator]);

  return pathData ? (
    <Path
      testID={testID}
      accessibilityLabel={`chart-line-maxValue:${maxValue},minValue:${minValue},labelsLength:${labels.length},color:${color}`}
      d={pathData}
      stroke={color || theme.colors.secondary}
      strokeWidth={DEFAULT_LINE_STROKE_WIDTH}
      fill="none"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  ) : null;
};

export default Line;