import { ViewStyle, TextStyle } from 'react-native';

import { palette } from '~/theme/colors';
import { metrics } from '~/theme/metrics';
import { spacing } from '~/theme/spacing';
import { typography } from '~/theme/typography';

const SIZE = 100;

export const colorStyles = {
  container: {
    width: SIZE,
    height: SIZE,
    margin: spacing[1],
    padding: spacing[1],
    borderColor: palette.black,
    borderWidth: metrics.borderWidth[0],
  } as ViewStyle,
  text: {
    fontSize: typography.fontSize[1],
  } as TextStyle,
};

export const colorsStyles = {
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'center',
  } as ViewStyle,
};

const THRESHOLD_COLOR = palette.tundora;
export function getTextColor(value: string): TextStyle {
  return { color: value <= THRESHOLD_COLOR ? 'white' : 'black' };
}
