"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _color = _interopRequireDefault(require("color"));
var _InputLabel = _interopRequireDefault(require("./Label/InputLabel"));
var _constants = require("./constants");
var _helpers = require("./helpers");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
const LABEL_PADDING_TOP = 8;
const MIN_HEIGHT = 80;
const MIN_DENSE_HEIGHT = 48;
const INPUT_PADDING_HORIZONTAL = 22;
const TextInputOutlined = _ref => {
  let {
    disabled = false,
    editable = true,
    label,
    error,
    selectionColor,
    underlineColor: _underlineColor,
    outlineColor: customOutlineColor,
    activeOutlineColor,
    dense,
    style,
    theme,
    render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
    multiline = false,
    parentState,
    innerRef,
    onFocus,
    forceFocus,
    onBlur,
    onChangeText,
    onLayoutAnimatedText,
    onLeftAffixLayoutChange,
    onRightAffixLayoutChange,
    left,
    right,
    placeholderTextColor,
    errorMessage,
    ...rest
  } = _ref;
  const {
    colors,
    fonts
  } = theme;
  const font = fonts.semiBold;
  const hasActiveOutline = parentState.focused || error;
  const {
    fontSize: fontSizeStyle,
    fontWeight,
    lineHeight,
    height,
    backgroundColor = colors.bg.subtle,
    textAlign,
    ...viewStyle
  } = _reactNative.StyleSheet.flatten(style) || {};
  const fontSize = fontSizeStyle || _constants.MAXIMIZED_LABEL_FONT_SIZE;
  let inputTextColor, activeColor, outlineColor, placeholderColor, errorColor;
  if (disabled) {
    const isTransparent = (0, _color.default)(customOutlineColor).alpha() === 0;
    inputTextColor = activeColor = (0, _color.default)(colors.fg.default).alpha(0.54).rgb().string();
    placeholderColor = colors.disabled;
    outlineColor = isTransparent ? customOutlineColor : colors.disabled;
  } else {
    inputTextColor = colors.text;
    activeColor = error ? colors.error.default : activeOutlineColor || colors.primary.default;
    placeholderColor = colors.fg.subtle;
    outlineColor = customOutlineColor || colors.placeholder;
    errorColor = colors.error.default;
  }
  const labelScale = _constants.MINIMIZED_LABEL_FONT_SIZE / fontSize;
  const fontScale = _constants.MAXIMIZED_LABEL_FONT_SIZE / fontSize;
  const labelWidth = parentState.labelLayout.width;
  const labelHeight = parentState.labelLayout.height;
  const labelHalfWidth = labelWidth / 2;
  const labelHalfHeight = labelHeight / 2;
  const baseLabelTranslateX = (_reactNative.I18nManager.isRTL ? 1 : -1) * (labelHalfWidth - labelScale * labelWidth / 2 - (fontSize - _constants.MINIMIZED_LABEL_FONT_SIZE) * labelScale);
  let labelTranslationXOffset = 0;
  const minInputHeight = (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT) - LABEL_PADDING_TOP;
  const inputHeight = (0, _helpers.calculateInputHeight)(labelHeight, height, minInputHeight);
  const topPosition = (0, _helpers.calculateLabelTopPosition)(labelHeight, inputHeight, LABEL_PADDING_TOP);
  if (height && typeof height !== "number") {
    // eslint-disable-next-line
    console.warn("Currently we support only numbers in height prop");
  }
  const paddingSettings = {
    height: height ? +height : null,
    labelHalfHeight,
    offset: LABEL_PADDING_TOP,
    multiline: multiline ? multiline : null,
    dense: dense ? dense : null,
    topPosition,
    fontSize,
    lineHeight,
    label,
    scale: fontScale,
    isAndroid: _reactNative.Platform.OS === "android",
    styles: _reactNative.StyleSheet.flatten(dense ? styles.inputOutlinedDense : styles.inputOutlined)
  };
  const pad = (0, _helpers.calculatePadding)(paddingSettings);
  const paddingOut = (0, _helpers.adjustPaddingOut)({
    ...paddingSettings,
    pad
  });
  const baseLabelTranslateY = -labelHalfHeight - (topPosition + OUTLINE_MINIMIZED_LABEL_Y_OFFSET) + 24;
  const placeholderOpacity = hasActiveOutline ? (0, _helpers.interpolatePlaceholder)(parentState.labeled, hasActiveOutline) : parentState.labelLayout.measured ? 1 : 0;
  const labelProps = {
    label,
    onLayoutAnimatedText,
    placeholderOpacity,
    error,
    placeholderStyle: styles.placeholder,
    baseLabelTranslateY,
    baseLabelTranslateX,
    font,
    fontSize,
    fontWeight,
    labelScale,
    wiggleOffsetX: _constants.LABEL_WIGGLE_X_OFFSET,
    topPosition,
    hasActiveOutline,
    activeColor,
    placeholderColor,
    backgroundColor: backgroundColor,
    errorColor,
    labelTranslationXOffset,
    roundness: theme.roundness,
    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
    errorMessage
  };
  const minHeight = height || (dense ? MIN_DENSE_HEIGHT : MIN_HEIGHT);
  const {
    leftLayout,
    rightLayout
  } = parentState;
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    style: viewStyle
  }, /*#__PURE__*/React.createElement(Outline, {
    theme: theme,
    hasActiveOutline: hasActiveOutline,
    focused: parentState.focused,
    activeColor: activeColor,
    outlineColor: outlineColor,
    backgroundColor: backgroundColor
  }), /*#__PURE__*/React.createElement(_reactNative.View, null, /*#__PURE__*/React.createElement(_reactNative.View, {
    style: [styles.labelContainer, {
      paddingTop: LABEL_PADDING_TOP,
      minHeight
    }]
  }, /*#__PURE__*/React.createElement(_InputLabel.default, {
    parentState: parentState,
    labelProps: labelProps,
    maxFontSizeMultiplier: rest.maxFontSizeMultiplier
  }), render === null || render === void 0 ? void 0 : render({
    testID: "text-input-outlined",
    ...rest,
    ref: innerRef,
    onChangeText,
    placeholder: label ? parentState.placeholder : rest.placeholder,
    placeholderTextColor: placeholderTextColor || placeholderColor,
    editable: !disabled && editable,
    selectionColor: typeof selectionColor === "undefined" ? activeColor : selectionColor,
    onFocus,
    onBlur,
    underlineColorAndroid: "transparent",
    multiline,
    style: [styles.input, !multiline || multiline && height ? {
      height: inputHeight
    } : {}, paddingOut, multiline ? {
      ...fonts.regular
    } : {
      ...font
    }, {
      fontSize: 14,
      top: multiline ? 28 : 8,
      fontWeight,
      fontFamily: "Inter",
      color: inputTextColor,
      textAlignVertical: multiline ? "top" : "center",
      textAlign: textAlign ? textAlign : _reactNative.I18nManager.isRTL ? "right" : "left"
    }, _reactNative.Platform.OS === "web" && {
      outline: "none",
      paddingTop: multiline ? 28 : 4
    }]
  }))));
};
var _default = TextInputOutlined;
exports.default = _default;
const Outline = _ref2 => {
  let {
    theme,
    hasActiveOutline,
    activeColor,
    outlineColor,
    focused,
    backgroundColor
  } = _ref2;
  return /*#__PURE__*/React.createElement(_reactNative.View, {
    testID: "text-input-outline",
    pointerEvents: "none",
    style: [styles.outline,
    // eslint-disable-next-line react-native/no-inline-styles
    {
      backgroundColor,
      borderRadius: theme.roundness,
      borderWidth: focused ? 2 : 1,
      borderColor: hasActiveOutline ? activeColor : outlineColor
    }]
  });
};
const styles = _reactNative.StyleSheet.create({
  placeholder: {
    position: "absolute",
    left: 0,
    paddingHorizontal: INPUT_PADDING_HORIZONTAL
  },
  outline: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 6,
    bottom: 0
  },
  labelContainer: {
    paddingBottom: 0
  },
  input: {
    flexGrow: 1,
    paddingHorizontal: INPUT_PADDING_HORIZONTAL,
    margin: 0,
    zIndex: 1,
    lineHeight: 22
  },
  inputOutlined: {
    paddingTop: 8,
    paddingBottom: 8
  },
  inputOutlinedDense: {
    paddingTop: 4,
    paddingBottom: 4
  }
});
//# sourceMappingURL=TextInputOutlined.js.map