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>
  );
}