import heroVariables from '../global';

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

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

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

export default mentionTextInputStyles;