import legacyVaribles from './variables';

const WRAPPER_MARGIN_VERTICAL = legacyVaribles.MEDIUM_SIZE;
const TEXT_FONT_SIZE = legacyVaribles.HEADER_4;
const TEXT_COLOR = legacyVaribles.TEXT_COLOR;
const HIGHLIGHT_TEXT_COLOR = legacyVaribles.GREY_4;
const SUGGESTION_WRAPPER_MARGIN = -4.0;

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

const mentionTextInputStyles = {
  wrapper: {
    marginBottom: WRAPPER_MARGIN_VERTICAL,
  },
  text: {
    fontSize: TEXT_FONT_SIZE,
    color: TEXT_COLOR,
    ...fontStyles,
  },
  disabledText: {
    color: legacyVaribles.DISABLED_TEXT_COLOR,
  },
  highlightText: {
    backgroundColor: HIGHLIGHT_TEXT_COLOR,
    borderRadius: 2.0,
  },
  suggestionWrapper: {
    marginTop: SUGGESTION_WRAPPER_MARGIN,
    backgroundColor: legacyVaribles.WHITE,
    borderRadius: 4.0,
    shadowColor: legacyVaribles.BLACK,
    shadowOffset: {
      height: 2.0,
      width: 0.0,
    },
    shadowOpacity: 0.4,
    shadowRadius: 4.0,
    elevation: 10.0,
  },
};

export default mentionTextInputStyles;