import heroVariables from '../global';

const CONTENT_FONT_SIZE = heroVariables.HEADER_5;
const WRAPPER_VERTICAL_PADDING = heroVariables.SMALL_SIZE / 2.0;
const WRAPPER_HORIZONTAL_PADDING = heroVariables.SMALL_SIZE;
const WRAPPER_HEIGHT = CONTENT_FONT_SIZE + WRAPPER_VERTICAL_PADDING * 2.0;

const getContentStyles = () => {
  const styles = {
    lineHeight: CONTENT_FONT_SIZE,
    textTransform: 'uppercase',
    fontSize: CONTENT_FONT_SIZE,
    fontWeight: '500',
    textAlign: 'center',
  } as const;

  if (heroVariables.FONT_FAMILY !== undefined) {
    return { ...styles, fontFamily: heroVariables.FONT_FAMILY };
  }

  return styles;
};

const badgeStyles = {
  wrapper: {
    alignSelf: 'flex-start',
    justifyContent: 'center',
    height: WRAPPER_HEIGHT,
    minWidth: WRAPPER_HEIGHT,
    paddingHorizontal: WRAPPER_HORIZONTAL_PADDING,
    borderRadius: WRAPPER_HEIGHT / 2.0,
  },
  content: getContentStyles(),
  errorWrapper: {
    backgroundColor: heroVariables.ERROR_COLOR,
  },
  errorContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  warningWrapper: {
    backgroundColor: heroVariables.WARNING_COLOR,
  },
  warningContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  successWrapper: {
    backgroundColor: heroVariables.SUCCESS_COLOR,
  },
  successContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
  infoWrapper: {
    backgroundColor: heroVariables.INFO_COLOR,
  },
  infoContent: {
    color: heroVariables.INVERTED_TEXT_COLOR,
  },
} as const;

export default badgeStyles;