"use strict";

import { forwardRef, useContext, useImperativeHandle, useRef, useState } from 'react';
import { TextInput, TouchableOpacity, View } from 'react-native';
import { ErrorView, FloatingView, getBorderColor, getFontStyle, getIconSize, getSizeStyle } from "./common.js";
import { ApplicationContext } from "../Context/index.js";
import { Icon } from "../Icon/index.js";
import { SizedBox } from "../SizedBox/index.js";
import { Spacing, Styles } from "../Consts/index.js";
import styles from "./styles.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const Input = /*#__PURE__*/forwardRef(({
  onChangeText,
  floatingValue,
  floatingIcon,
  size = 'small',
  onBlur,
  onFocus,
  error,
  leading,
  trailing,
  disabled,
  floatingIconColor,
  iconColor,
  required,
  style,
  ...props
}, ref) => {
  const {
    theme
  } = useContext(ApplicationContext);
  const inputRef = useRef(null);
  const [focused, setFocused] = useState(false);
  const [secureTextEntry, setSecureTextEntry] = useState(props.secureTextEntry);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    blur: () => {
      inputRef.current?.blur();
    },
    clear: onClearText,
    setText: value => {
      inputRef.current?.setNativeProps?.({
        text: value
      });
      onChangeText?.(value);
    }
  }));
  const onClearText = () => {
    inputRef.current?.clear();
    onChangeText?.('');
  };
  const _onFocus = e => {
    setFocused(true);
    onFocus?.(e);
  };
  const _onBlur = e => {
    setFocused(false);
    onBlur?.(e);
  };
  const renderLeadingIcon = () => {
    const disabledColor = theme.colors.text.disable;
    const iconSize = getIconSize(size);
    let iconTintColor = iconColor;
    if (disabled) {
      iconTintColor = disabledColor;
    }
    if (leading) {
      return /*#__PURE__*/_jsxs(View, {
        style: Styles.row,
        children: [/*#__PURE__*/_jsx(SizedBox, {
          width: Spacing.M
        }), typeof leading === 'string' ? /*#__PURE__*/_jsx(Icon, {
          color: iconTintColor,
          name: leading,
          size: iconSize
        }) : leading]
      });
    }
    return null;
  };

  /**
   * Renders the trailing icon in the Input component.
   */
  const renderTrailingIcon = () => {
    const disabledColor = theme.colors.text.disable;
    const iconSize = getIconSize(size);
    let iconTintColor = iconColor;
    if (disabled) {
      iconTintColor = disabledColor;
    }
    if (props.secureTextEntry) {
      return /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(SizedBox, {
          width: Spacing.S
        }), /*#__PURE__*/_jsx(TouchableOpacity, {
          onPress: () => setSecureTextEntry(!secureTextEntry),
          children: /*#__PURE__*/_jsx(Icon, {
            color: iconTintColor,
            name: secureTextEntry ? 'eye-outline' : 'eye-off-outline',
            size: iconSize
          })
        })]
      });
    }
    if (trailing) {
      return /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(SizedBox, {
          width: Spacing.S
        }), typeof trailing === 'string' ? /*#__PURE__*/_jsx(Icon, {
          color: iconTintColor,
          name: trailing,
          size: iconSize
        }) : trailing]
      });
    }
    return null;
  };
  const renderInputView = () => {
    const disabledColor = theme.colors.text.disable;
    const iconSize = getIconSize(size);
    let textColor = theme.colors.text.default;
    let placeholderColor = theme.colors.text.hint;
    if (disabled) {
      textColor = disabledColor;
      placeholderColor = disabledColor;
    }
    return /*#__PURE__*/_jsxs(View, {
      style: [styles.inputWrapper, {
        backgroundColor: theme.colors.background.surface
      }, !!floatingValue && {
        marginTop: Spacing.S
      }, getSizeStyle(size), getBorderColor(theme, focused, error, disabled)],
      children: [/*#__PURE__*/_jsx(FloatingView, {
        floatingValue: floatingValue,
        floatingIconColor: floatingIconColor,
        disabled: disabled,
        required: required,
        floatingIcon: floatingIcon
      }), renderLeadingIcon(), /*#__PURE__*/_jsx(View, {
        style: styles.inputView,
        children: /*#__PURE__*/_jsx(TextInput, {
          ref: inputRef,
          ...props,
          editable: !disabled,
          style: [styles.input, getFontStyle(theme, size), {
            color: textColor,
            lineHeight: undefined
          }, style],
          textContentType: "oneTimeCode",
          secureTextEntry: props.secureTextEntry && secureTextEntry,
          textBreakStrategy: "highQuality",
          onChangeText: onChangeText,
          onFocus: _onFocus,
          onBlur: _onBlur,
          selectionColor: theme.colors.primary.default,
          placeholderTextColor: placeholderColor
        })
      }), /*#__PURE__*/_jsxs(View, {
        style: styles.iconView,
        children: [focused && /*#__PURE__*/_jsxs(_Fragment, {
          children: [/*#__PURE__*/_jsx(SizedBox, {
            width: Spacing.XS
          }), /*#__PURE__*/_jsx(TouchableOpacity, {
            onPress: onClearText,
            children: /*#__PURE__*/_jsx(Icon, {
              name: "close",
              size: iconSize
            })
          })]
        }), renderTrailingIcon()]
      })]
    });
  };
  return /*#__PURE__*/_jsxs(View, {
    style: styles.wrapper,
    children: [renderInputView(), /*#__PURE__*/_jsx(ErrorView, {
      error: error
    })]
  });
});
export default Input;
//# sourceMappingURL=Input.js.map