import * as React from 'react';
import { View } from 'react-native';

import { Text } from '~/components';
import { getKeyByValue } from '~/utils/object';
import { enhanceTextStyle, enhanceViewStyle } from '~/utils/styles';

import { colorsStyles, colorStyles, getTextColor } from './colors.styles';

function Color({ name, value }) {
  const viewStyle = enhanceViewStyle([colorStyles.container, { backgroundColor: value }]);
  const textStyle = enhanceTextStyle([colorStyles.text, getTextColor(value)]);

  return (
    <View style={viewStyle}>
      <Text style={textStyle} text={name} />
      <Text style={textStyle} text={value} />
    </View>
  );
}

export function Colors({ colors }) {
  const colorList = Object.values<string>(colors).sort();

  return (
    <View style={colorsStyles.container}>
      {colorList.map((color, index) => (
        <Color key={index} name={getKeyByValue(colors, color)} value={color} />
      ))}
    </View>
  );
}
