import React from "react";
import { View } from "react-native";
import { XAxis, YAxis } from "react-native-svg-charts";
import { graphStyles } from "../chart-styles";
import ChartView from "../chart-view";
import { ChartContainerProps } from "../graph-types";
import { useGraphData } from "../use-graph-data";

// TODO: #43 #31 separate PR will update useGraphData to take into account useCommonScale
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
const ChartContainer: React.FC<ChartContainerProps> = ({
	ChartComponent,
	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);

	// TODO: This could be done by the hook since it already handles spreading props.
	// Depending on if we want a context provider for Charts, that could be another way to handle it
	const chartComponentProps = {
		yData,
		xValues,
		lineStrokeWidth,
		min,
		contentInset,
		numberOfTicks,
	};
	return (
		<ChartView>
			<View
				style={[graphStyles.rowContainer, { height: height }]}
				testID={`chart-container-${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}>
					<ChartComponent {...chartComponentProps} />
					<XAxis
						data={xValues.map((_, index: number) => index)} // TODO: update when useGraphHook returns explicit display values
						formatLabel={(_, index) => xValues[index]}
						style={[graphStyles.xAxisMarginTop]}
						svg={graphStyles.xAxisFontStyle}
						numberOfTicks={numberOfTicks} // need a dynamic way of setting number of ticks
						contentInset={graphStyles.horizontalInset}
						// scale={scale.scaleBand} // Need to know the type of ChartComponent
					/>
				</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}
				/>
			</View>
		</ChartView>
	);
};

export default ChartContainer;