import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { concat } from "../../utils/classNames.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { Label } from "../label/label.component.js";
import { StatusWrapper } from "../statusWrapper/statusWrapper.component.js";
import { ValidationErrors } from "../validationErrors/validationErrors.component.js";
import "./inputWrapper.theme.css.js";
const InputWrapper = React.forwardRef(({ className, children, leftOverlay, rightOverlay, validationMode, validationErrorMessages, errorIcon, disabled, pending, error, statusPosition, hideIconOnStatus, disableOnPending, scrollValidationErrorsIntoView, statusClassName, validationErrorsClassName, label, required, requiredIndicator, labelClassName, labelId, displaySize, ...nativeProps }, ref) => {
  const globals = useArmstrongConfig({
    validationMode,
    hideInputErrorIconOnStatus: hideIconOnStatus,
    disableControlOnPending: disableOnPending,
    requiredIndicator,
    scrollValidationErrorsIntoView,
    inputStatusPosition: statusPosition,
    validationErrorIcon: errorIcon,
    inputDisplaySize: displaySize
  });
  const shouldShowValidationErrorsList = globals.validationMode === "both" || globals.validationMode === "message";
  const shouldShowErrorIcon = !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length) && (globals.validationMode === "both" || globals.validationMode === "icon") || error;
  const showLeftOverlay = leftOverlay && (globals.inputStatusPosition !== "left" || !globals.hideInputErrorIconOnStatus || !pending && !shouldShowErrorIcon);
  const showRightOverlay = rightOverlay && (globals.inputStatusPosition !== "right" || !globals.hideInputErrorIconOnStatus || !pending && !shouldShowErrorIcon);
  return jsx(Fragment, { children: jsxs("div", { ref, className: concat("arm-input", "arm-input-wrapper", className), "data-disabled": disabled || pending && globals.disableControlOnPending ? true : void 0, "data-error": error || !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length) ? true : void 0, "data-left-overlay": showLeftOverlay || globals.inputStatusPosition === "left" && (shouldShowErrorIcon || pending) ? true : void 0, "data-right-overlay": showRightOverlay || globals.inputStatusPosition === "right" && (shouldShowErrorIcon || pending) ? true : void 0, ...nativeProps, children: [label && jsx(Label, { className: concat("arm-input-base-label", labelClassName), required, requiredIndicator: globals.requiredIndicator, htmlFor: labelId, displaySize: globals.inputDisplaySize, children: label }), jsx("div", { className: "arm-input-inner", children: jsx(StatusWrapper, { error: error || !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length), pending, statusPosition: globals.inputStatusPosition, errorIcon: globals.validationErrorIcon, validationMode: globals.validationMode, className: statusClassName, children: jsxs(Fragment, { children: [showLeftOverlay && jsx("div", { className: "arm-input-overlay arm-input-overlay-left", children: leftOverlay }), children, showRightOverlay && jsx("div", { className: "arm-input-overlay arm-input-overlay-right", children: rightOverlay })] }) }) }), !!(validationErrorMessages == null ? void 0 : validationErrorMessages.length) && shouldShowValidationErrorsList && jsx(ValidationErrors, { className: validationErrorsClassName, validationMode: globals.validationMode, validationErrors: validationErrorMessages, scrollIntoView: globals.scrollValidationErrorsIntoView })] }) });
});
InputWrapper.displayName = "InputWrapper";
export {
  InputWrapper
};
//# sourceMappingURL=inputWrapper.component.js.map
