"use strict";

import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
import { AccessibilityInfo, View } from "react-native";
import Animated from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { enterTransitionInputIcon, exitTransitionInputIcon } from "../../core/IOTransitions";
import { triggerHaptic } from "../../functions";
import { Icon } from "../icons";
import { TextInputBase } from "./TextInputBase";
import { jsx as _jsx } from "react/jsx-runtime";
function isValidationWithOptions(validation) {
  return typeof validation === "object" && "isValid" in validation && "errorMessage" in validation;
}
const feedbackIconSize = 24;
export const TextInputValidation = /*#__PURE__*/forwardRef(({
  onValidate,
  errorMessage,
  value,
  bottomMessage,
  onBlur,
  onFocus,
  validationMode = "onBlur",
  accessibilityErrorLabel,
  ...props
}, ref) => {
  const theme = useIOTheme();
  const [isValid, setIsValid] = useState(undefined);
  const [errMessage, setErrMessage] = useState(errorMessage);
  const getErrorFeedback = useCallback((isValid, message) => {
    setIsValid(isValid);
    setErrMessage(message);
    if (!isValid) {
      triggerHaptic("notificationError");
      AccessibilityInfo.announceForAccessibilityWithOptions(accessibilityErrorLabel ?? message, {
        queue: true
      });
    } else {
      triggerHaptic("notificationSuccess");
    }
  }, [accessibilityErrorLabel]);
  const validateInput = useCallback(() => {
    const validation = onValidate(value);
    if (isValidationWithOptions(validation)) {
      getErrorFeedback(validation.isValid, validation.errorMessage);
    } else {
      getErrorFeedback(validation, errorMessage);
    }
  }, [value, errorMessage, onValidate, getErrorFeedback]);

  // Expose the validateInput function to the parent component
  useImperativeHandle(ref, () => ({
    validateInput
  }));
  const onBlurHandler = useCallback(() => {
    if (validationMode === "onBlur") {
      validateInput();
    }
    onBlur?.();
  }, [validationMode, validateInput, onBlur]);
  const onFocusHandler = useCallback(() => {
    setIsValid(undefined);
    onFocus?.();
  }, [onFocus]);
  const labelError = useMemo(() => isValid === false && errMessage ? errMessage : bottomMessage, [isValid, errMessage, bottomMessage]);
  const labelErrorColor = useMemo(() => isValid === false && errMessage ? theme.errorText : undefined, [isValid, errMessage, theme.errorText]);
  const feedbackIconAttrMap = useMemo(() => ({
    valid: {
      name: "success",
      color: theme.successIcon
    },
    notValid: {
      name: "errorFilled",
      color: theme.errorIcon
    }
  }), [theme]);
  const feedbackIcon = useMemo(() => {
    const validationStatus = isValid ? "valid" : "notValid";
    return isValid !== undefined ? /*#__PURE__*/_jsx(Animated.View, {
      entering: enterTransitionInputIcon,
      exiting: exitTransitionInputIcon,
      children: /*#__PURE__*/_jsx(Icon, {
        name: feedbackIconAttrMap[validationStatus].name,
        color: feedbackIconAttrMap[validationStatus].color,
        size: feedbackIconSize
      })
    }) : /*#__PURE__*/_jsx(View, {
      style: {
        width: feedbackIconSize,
        height: feedbackIconSize
      }
    });
  }, [feedbackIconAttrMap, isValid]);
  return /*#__PURE__*/_jsx(TextInputBase, {
    ...props,
    value: value,
    status: isValid === false ? "error" : undefined,
    bottomMessage: labelError,
    bottomMessageColor: labelErrorColor,
    rightElement: feedbackIcon,
    onBlur: onBlurHandler,
    onFocus: onFocusHandler
  });
});
//# sourceMappingURL=TextInputValidation.js.map