import legacyVariables from './variables';

const WRAPPER_VERTICAL_PADDING = legacyVariables.SMALL_SIZE;
const WRAPPER_HORIZONTAL_PADDING = legacyVariables.MEDIUM_SIZE;
const CONTENT_FONT_SIZE = legacyVariables.HEADER_5;

const fontStyles = legacyVariables.FONT_FAMILY !== undefined ? { fontFamily: legacyVariables.FONT_FAMILY } : {};

const messageStyles = {
  wrapper: {
    paddingVertical: WRAPPER_VERTICAL_PADDING,
    paddingHorizontal: WRAPPER_HORIZONTAL_PADDING,
    top: 0.0,
    left: 0.0,
    right: 0.0,
  },
  content: {
    ...fontStyles,
    fontSize: CONTENT_FONT_SIZE,
    fontWeight: '500',
    textAlign: 'center',
  },
  errorWrapper: {
    backgroundColor: legacyVariables.ERROR_COLOR,
  },
  errorContent: {
    color: legacyVariables.INVERTED_TEXT_COLOR,
  },
  warningWrapper: {
    backgroundColor: legacyVariables.WARNING_COLOR,
  },
  warningContent: {
    color: legacyVariables.INVERTED_TEXT_COLOR,
  },
  successWrapper: {
    backgroundColor: legacyVariables.SUCCESS_COLOR,
  },
  successContent: {
    color: legacyVariables.INVERTED_TEXT_COLOR,
  },
  infoWrapper: {
    backgroundColor: legacyVariables.INFO_COLOR,
  },
  infoContent: {
    color: legacyVariables.INVERTED_TEXT_COLOR,
  },
} as const;

export default messageStyles;