import heroVariables from '../global';

const WRAPPER_MARGIN_VERTICAL = heroVariables.MEDIUM_SIZE;
const LABEL_FONT_SIZE = heroVariables.HEADER_5;
const LABEL_COLOR = heroVariables.MUTED_TEXT_COLOR;
const PLACEHOLDER_COLOR = heroVariables.MUTED_TEXT_COLOR;
const INPUT_FONT_SIZE = heroVariables.HEADER_4;
const INPUT_PADDING_VERTICAL = heroVariables.MEDIUM_SIZE;
const INPUT_HEIGHT = INPUT_FONT_SIZE + INPUT_PADDING_VERTICAL * 2.0;
const INPUT_BORDER_COLOR = heroVariables.BORDER_COLOR;
const INPUT_COLOR = heroVariables.TEXT_COLOR;
const ICON_MARGIN = heroVariables.SMALL_SIZE;
const ICON_COLOR = heroVariables.MUTED_TEXT_COLOR;
const ERROR_FONT_SIZE = heroVariables.HEADER_5;
const ERROR_MARGIN_VERTICAL = heroVariables.SMALL_SIZE;
const ERROR_COLOR = heroVariables.DANGER_COLOR;
const ACTIVE_COLOR = heroVariables.PRIMARY_COLOR;

const fontFamilyStyle = heroVariables.FONT_FAMILY
  ? {
      fontFamily: heroVariables.FONT_FAMILY,
    }
  : {};

const styles = {
  wrapper: {
    marginBottom: WRAPPER_MARGIN_VERTICAL,
  },
  label: {
    height: LABEL_FONT_SIZE,
    lineHeight: LABEL_FONT_SIZE,
    fontSize: LABEL_FONT_SIZE,
    fontWeight: '500',
    color: LABEL_COLOR,
    ...fontFamilyStyle,
  },
  placeholder: { color: PLACEHOLDER_COLOR },
  textInput: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: 0.8,
    borderBottomColor: INPUT_BORDER_COLOR,
  },
  baseTextInput: {
    flex: 1.0,
    paddingTop: INPUT_PADDING_VERTICAL,
    paddingBottom: INPUT_PADDING_VERTICAL,
    textAlignVertical: 'center',
    fontSize: INPUT_FONT_SIZE,
    color: INPUT_COLOR,
    ...fontFamilyStyle,
  },
  icon: { height: INPUT_HEIGHT, marginLeft: ICON_MARGIN, color: ICON_COLOR },
  errorMessage: {
    minHeight: ERROR_FONT_SIZE,
    lineHeight: ERROR_FONT_SIZE,
    marginTop: ERROR_MARGIN_VERTICAL,
    fontSize: ERROR_FONT_SIZE,
    fontWeight: '500',
    color: ERROR_COLOR,
    ...fontFamilyStyle,
  },
  errorLabel: { color: ERROR_COLOR },
  errorTextInput: { borderBottomColor: ERROR_COLOR },
  errorIcon: { color: ERROR_COLOR },
  activeLabel: { color: ACTIVE_COLOR },
  activeTextInput: { borderBottomColor: ACTIVE_COLOR, borderBottomWidth: 1.0 },
  activeIcon: { color: ACTIVE_COLOR },
  disabledBaseTextInput: { color: heroVariables.DISABLED_TEXT_COLOR },
} as const;

export default styles;