// packages/components/src/validated-form-controls/control-with-error.tsx
import { __ } from "@wordpress/i18n";
import { cloneElement, forwardRef, useEffect, useState } from "@wordpress/element";
import { ValidityIndicator } from "./validity-indicator.js";
import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
function appendRequiredIndicator(label, required, markWhenOptional) {
  if (required && !markWhenOptional) {
    return /* @__PURE__ */ _jsxs(_Fragment, {
      children: [label, " ", `(${__("Required")})`]
    });
  }
  if (!required && markWhenOptional) {
    return /* @__PURE__ */ _jsxs(_Fragment, {
      children: [label, " ", `(${__("Optional")})`]
    });
  }
  return label;
}
var VALIDITY_VISIBLE_ATTRIBUTE = "data-validity-visible";
var className = "components-validated-control";
function UnforwardedControlWithError({
  required,
  markWhenOptional,
  customValidity,
  getValidityTarget,
  children
}, forwardedRef) {
  const [errorMessage, setErrorMessage] = useState();
  const [statusMessage, setStatusMessage] = useState();
  const [showMessage, setShowMessage] = useState(false);
  const [isTouched, setIsTouched] = useState(false);
  useEffect(() => {
    const validityTarget = getValidityTarget();
    const handler = () => {
      setShowMessage(true);
      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    };
    validityTarget?.addEventListener("invalid", handler);
    return () => validityTarget?.removeEventListener("invalid", handler);
  }, [getValidityTarget]);
  useEffect(() => {
    var _validityTarget$close;
    const validityTarget = getValidityTarget();
    const suppressNativePopover = (event) => {
      var _target$form$elements;
      event.preventDefault();
      const target = event.target;
      const firstErrorInForm = Array.from((_target$form$elements = target.form?.elements) !== null && _target$form$elements !== void 0 ? _target$form$elements : []).find((el) => !el.validity.valid);
      if (!target.form || firstErrorInForm === target) {
        target.focus();
      }
    };
    const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from((_validityTarget$close = validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type="radio"][name="${validityTarget?.name}"]`)) !== null && _validityTarget$close !== void 0 ? _validityTarget$close : []).filter((sibling) => sibling !== validityTarget) : [];
    validityTarget?.addEventListener("invalid", suppressNativePopover);
    radioSibilings.forEach((sibling) => sibling.addEventListener("invalid", suppressNativePopover));
    return () => {
      validityTarget?.removeEventListener("invalid", suppressNativePopover);
      radioSibilings.forEach((sibling) => sibling.removeEventListener("invalid", suppressNativePopover));
    };
  }, [getValidityTarget]);
  useEffect(() => {
    const validityTarget = getValidityTarget();
    if (!customValidity?.type) {
      validityTarget?.setCustomValidity("");
      setErrorMessage(validityTarget?.validationMessage);
      setStatusMessage(void 0);
      return;
    }
    switch (customValidity.type) {
      case "validating": {
        validityTarget?.setCustomValidity("");
        setErrorMessage(void 0);
        setStatusMessage({
          type: "validating",
          message: customValidity.message
        });
        break;
      }
      case "valid": {
        validityTarget?.setCustomValidity("");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage({
          type: "valid",
          message: customValidity.message
        });
        break;
      }
      case "invalid": {
        var _customValidity$messa;
        validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage(void 0);
        break;
      }
    }
  }, [customValidity, getValidityTarget]);
  useEffect(() => {
    if (!isTouched || showMessage) {
      return;
    }
    if (customValidity?.type === "validating") {
      const timer = setTimeout(() => {
        setShowMessage(true);
      }, 1e3);
      return () => clearTimeout(timer);
    }
    setShowMessage(true);
  }, [isTouched, customValidity?.type, showMessage]);
  const onBlur = (event) => {
    if (isTouched) {
      return;
    }
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      setIsTouched(true);
      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    }
  };
  const message = () => {
    if (errorMessage) {
      return /* @__PURE__ */ _jsx(ValidityIndicator, {
        type: "invalid",
        message: errorMessage
      });
    }
    if (statusMessage?.type) {
      return /* @__PURE__ */ _jsx(ValidityIndicator, {
        type: statusMessage.type,
        message: statusMessage.message
      });
    }
    return null;
  };
  return /* @__PURE__ */ _jsxs("div", {
    className,
    ref: forwardedRef,
    onBlur,
    children: [cloneElement(children, {
      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
      required
    }), /* @__PURE__ */ _jsx("div", {
      "aria-live": "polite",
      children: showMessage && message()
    })]
  });
}
var ControlWithError = forwardRef(UnforwardedControlWithError);
export {
  ControlWithError
};
//# sourceMappingURL=control-with-error.js.map
