import React from "react";
import { Text, View } from "react-native";

import { chartLabel } from "../chart-styles";

type Axis = "RIGHT" | "LEFT";

interface YLabel {
	axis: Axis;
	displayName: string;
	color: string;
}

type ChartLabelProps = {
	title: string;
	yLabels: Array<YLabel>;
};

const renderLabels = (yLabels: Array<YLabel>) => {
	return yLabels.map((label) => (
		<View
			key={`${label.axis}-${label.displayName}`}
			style={chartLabel.labelInnerRow}
		>
			<View
				style={[chartLabel.labelColorBox, { backgroundColor: label.color }]}
			/>
			<View style={chartLabel.labelTextMargin}>
				<Text style={chartLabel.labelText}>{label.displayName}</Text>
			</View>
		</View>
	));
};

export default function ChartLabel({ title, yLabels }: ChartLabelProps) {
	return (
		<View>
			<View style={chartLabel.titleRow}>
				<Text style={chartLabel.titleText}>{title}</Text>
			</View>
			<View style={chartLabel.labelOuterRow}>{renderLabels(yLabels)}</View>
		</View>
	);
}