import React from 'react';
import * as shape from 'd3-shape';
import { View } from 'react-native';
import { LineChart, XAxis, YAxis } from 'react-native-svg-charts';

import { useGraphData } from '../use-graph-data';
import { CustomGrid } from '../custom-grid';
import { graphStyles } from '../chart-styles';
import ChartView from '../chart-view';
import { CommonProps } from '../graph-types';

// TODO: separate PR will update useGraphData to take into account useCommonScale
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
const LineGraph: React.FC<CommonProps> = ({ data, useCommonScale = false, testID, ...props }) => {
  if (!data || typeof data !== 'object') {
    return null
  }; // TODO:#38
  const {
    xValues,
    yData,
    yAxisLeftLabels,
    yAxisRightLabels,
    defaultProps: {
      height,
      contentInset,
      min,
      numberOfTicks,
      lineStrokeWidth,
      yAxisProps: {
        maxLeftYAxisValue,
        maxRightYAxisValue,
        formatLeftYAxisLabel,
        formatRightYAxisLabel
      }
    }
  // Proper error/loading handling from useQueryHandler can work with this rule #38
  // eslint-disable-next-line react-hooks/rules-of-hooks
  } = useGraphData(data, props);

  return (
    <ChartView>
      <View style={[graphStyles.rowContainer, { height: height }]} testID={`line-graph-${testID}`}>
        <YAxis
          data={yAxisLeftLabels.values}
          contentInset={contentInset}
          svg={graphStyles.yAxisFontStyle}
          style={graphStyles.yAxisLeftPadding}
          min={min}
          max={maxLeftYAxisValue}
          numberOfTicks={numberOfTicks}
          formatLabel={formatLeftYAxisLabel}
        />
        <View style={graphStyles.flex}>
          <LineChart
            style={graphStyles.flex}
            data={yData}
            curve={shape.curveNatural}
            svg={{ strokeWidth: lineStrokeWidth}}
            yAccessor={({ item }) => (item as unknown as { value: number }).value}
            xAccessor={({ index }) => xValues[index] as number}
            gridMin={min}
            contentInset={contentInset}
            numberOfTicks={numberOfTicks}
          >
            <CustomGrid />
          </LineChart>
          <XAxis
            data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
            style={[graphStyles.xAxisMarginTop]}
            svg={graphStyles.xAxisFontStyle}
            numberOfTicks={numberOfTicks}
            contentInset={graphStyles.horizontalInset}
          />
        </View>
        <YAxis
          data={yAxisRightLabels?.values ?? yAxisLeftLabels.values}
          contentInset={contentInset}
          svg={graphStyles.yAxisFontStyle}
          style={[graphStyles.yAxisRightPadding, { height: useCommonScale ? 0 : 'auto' }]}
          min={min}
          max={maxRightYAxisValue}
          numberOfTicks={numberOfTicks}
          formatLabel={formatRightYAxisLabel} // formatRightYAxisLabel formatting could come from yAxisRightLabels object
        />
      </View>
    </ChartView>
  );
};

export default LineGraph;