"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _box = _interopRequireDefault(require("../../atoms/box/box"));
var _text = require("../../atoms/text/text");
var _useMolecularComponentConfig = require("../../../hooks/useMolecularComponentConfig");
var _useAtomicComponentConfig = require("../../../hooks/useAtomicComponentConfig");
var _icon = _interopRequireDefault(require("../../atoms/icon/icon"));
var _reactNative = require("react-native");
var _styleFunctions = require("../../../theme/src/style-functions");
var _useStyleProps = require("../../../hooks/useStyleProps");
var _pressable = _interopRequireDefault(require("../../atoms/pressable/pressable"));
var _useFocusedState = require("../../../hooks/state/useFocusedState");
var _useDisabledState = require("../../../hooks/state/useDisabledState");
var _useInvalidState = require("../../../hooks/state/useInvalidState");
var _stack = require("../../atoms/stack/stack");
var _hooks = require("../../../hooks");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// Additional style Functions used for this component
const placeholderTextColorStyleFunction = (0, _styleFunctions.createStyleFunction)({
  property: "placeholderTextColor",
  styleProperty: "placeholderTextColor",
  themeKey: "palette",
  transform: _styleFunctions.transformColorValue
});
const selectionColorStyleFunction = (0, _styleFunctions.createStyleFunction)({
  property: "selectionColor",
  styleProperty: "selectionColor",
  themeKey: "palette",
  transform: _styleFunctions.transformColorValue
});
const inputRootStyleFunction = [..._styleFunctions.boxStyleFunctions, placeholderTextColorStyleFunction, selectionColorStyleFunction];
const inputTextStyleFunction = [_styleFunctions.colorStyleFunction, _styleFunctions.typographyStyleFunction];

/** The Input component is a component that is used to get user input in a text field. **/
const Input = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(({
  children,
  onFocus = undefined,
  onBlur = undefined,
  size = "m",
  isDisabled = false,
  isFullWidth = false,
  hasClearButton = false,
  isInvalid = false,
  leftIcon = undefined,
  rightIcon = undefined,
  colorScheme = "primary",
  onChangeText = () => {},
  onChange = () => {},
  ...rest
}, textInputRef) => {
  const {
    theme
  } = (0, _hooks.useTheme)();
  const [isCleared, setIsCleared] = (0, _react.useState)(rest.value && rest.value.length > 0 ? false : true);
  let molecularProps = (0, _useMolecularComponentConfig.useMolecularComponentConfig)("Input", rest, {
    size: size,
    variant: rest["variant"]
  }, colorScheme, _styleFunctions.boxStyleFunctions, "container", "input", "container");
  const {
    atoms
  } = molecularProps;
  const inputProps = (0, _useStyleProps.useStyleProps)(atoms.input, inputRootStyleFunction);
  const {
    placeholderTextColor,
    selectionColor,
    ...finalInputStyle
  } = inputProps.style;
  const textProps = (0, _useAtomicComponentConfig.useAtomicComponentConfig)("Text", atoms.text, {
    size: size,
    variant: atoms.text.variant
  }, "primary", inputTextStyleFunction);
  const memoizedBuildFontConfig = (0, _react.useCallback)(() => (0, _text.buildFontConfig)(textProps.style, atoms.input.allowFontScaling || true, theme), [textProps.style, atoms.input.allowFontScaling]);
  const finalTextStyles = (0, _react.useMemo)(() => ({
    ...textProps.style,
    ...memoizedBuildFontConfig()
  }), [textProps.style, memoizedBuildFontConfig]);

  // Use State for dynamic styles
  const {
    focused,
    setFocused,
    propsWithFocusedStyles
  } = (0, _useFocusedState.useFocusedState)(atoms.container, _styleFunctions.boxStyleFunctions, "molecule");
  atoms.container = propsWithFocusedStyles;
  const {
    propsWithDisabledStyles
  } = (0, _useDisabledState.useDisabledState)(atoms.container, _styleFunctions.boxStyleFunctions, "molecule", true, isDisabled);
  atoms.container = propsWithDisabledStyles;
  const {
    propsWithInvalidStyles
  } = (0, _useInvalidState.useInvalidState)(atoms.container, _styleFunctions.boxStyleFunctions, "molecule", true, isInvalid);
  atoms.container = propsWithInvalidStyles;

  // METHODS
  const clearInputHandler = () => {
    textInputRef.current.clear();
    setIsCleared(true);
    onChangeText("");
  };
  const onChangeHandler = event => {
    const {
      text
    } = event.nativeEvent;
    if (text.length > 0) {
      setIsCleared(false);
    }
    onChange(event);
  };
  const onChangeTextHandler = value => {
    if (value.length > 0) {
      setIsCleared(false);
    }
    onChangeText(value);
  };
  const focusInputHandler = event => {
    setFocused(true);
    if (onFocus) {
      onFocus(event);
    }
  };
  const blurInputHandler = event => {
    setFocused(false);
    if (onBlur) {
      onBlur(event);
    }
  };

  // Render Functions
  const renderLeftIcon = (0, _react.useCallback)(() => {
    if (leftIcon) {
      return /*#__PURE__*/_react.default.cloneElement(leftIcon, {
        ...atoms.icon,
        ...leftIcon.props
      });
    }
  }, [leftIcon, atoms.icon]);
  const renderRightIcon = (0, _react.useCallback)(() => {
    if (rightIcon) {
      return /*#__PURE__*/_react.default.cloneElement(rightIcon, {
        ...atoms.icon,
        ...rightIcon.props
      });
    }
  }, [rightIcon, atoms.icon]);
  const renderClearIcon = (0, _react.useCallback)(() => {
    if (hasClearButton && !isCleared) {
      return /*#__PURE__*/_react.default.createElement(_pressable.default, {
        testID: "clear-icon",
        onPress: clearInputHandler
      }, /*#__PURE__*/_react.default.createElement(_icon.default, _extends({}, atoms.icon, {
        iconFamily: "Ionicons",
        iconName: "close",
        marginLeft: "2"
      })));
    }
  }, [hasClearButton, isCleared, clearInputHandler, atoms.icon]);
  return /*#__PURE__*/_react.default.createElement(_box.default, _extends({}, atoms.container, {
    w: isFullWidth ? "100%" : undefined
  }), renderLeftIcon(), /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({}, inputProps, {
    ref: textInputRef,
    editable: !isDisabled,
    onFocus: focusInputHandler,
    onBlur: blurInputHandler,
    onChange: onChangeHandler,
    onChangeText: onChangeTextHandler,
    allowFontScaling: true,
    placeholderTextColor: placeholderTextColor ?? "#a7a7a7",
    selectionColor: selectionColor ?? null,
    accessibilityLabel: rest.accessibilityLabel ?? rest.placeholder,
    accessibilityState: {
      disabled: isDisabled,
      selected: focused
    },
    style: [finalInputStyle, finalTextStyles, _reactNative.Platform.OS === "web" ? {
      outlineStyle: "none"
    } : {}, {
      flex: 1
    }]
  })), /*#__PURE__*/_react.default.createElement(_stack.HStack, {
    spacing: "0",
    alignSelf: "center",
    alignItems: "center"
  }, renderRightIcon(), renderClearIcon()));
}));
Input.displayName = "Input";
var _default = exports.default = Input;
//# sourceMappingURL=input.js.map