;
{
  try {
    let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "9757f966-c0cd-4df4-8a58-2ae57803e7b8", e._sentryDebugIdIdentifier = "sentry-dbid-9757f966-c0cd-4df4-8a58-2ae57803e7b8");
  } catch (e) {
  }
}
;
import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
import cx from "classnames";
import { u as useTranslation, r as Icon, p as useAnalyticsContext, z as Typography } from "./StoreProvider-CqQrndhS.js";
import { t as trackNavigation } from "./trackNavigation-db_h46BT.js";
import { K as KEYBOARD_KEYS } from "./Modal-1lLoobr9.js";
const FormNavigationItem = ({
  form,
  isActive,
  onClick,
  hasVerificationErrors
}) => {
  const { t } = useTranslation("common");
  const hasError = form.hasServerValidationErrors || hasVerificationErrors;
  const handleKeyDown = (e) => {
    if (onClick && (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space)) {
      e.preventDefault();
      onClick();
    }
  };
  return /* @__PURE__ */ jsx(
    "li",
    {
      "aria-label": t(($) => $[form.formName]),
      "aria-current": isActive,
      className: cx("adyen-kyc-form-navigation__item", {
        "adyen-kyc-form-navigation__item--active": isActive,
        "adyen-kyc-form-navigation__item--valid": form.isValid,
        "adyen-kyc-form-navigation__item--isnav": Boolean(onClick)
      }),
      children: /* @__PURE__ */ jsxs(
        "button",
        {
          type: "button",
          onClick,
          onKeyDown: onClick ? handleKeyDown : void 0,
          tabIndex: onClick ? 0 : void 0,
          children: [
            t(($) => $[form.formName]),
            form.hasServerValidationErrors && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--error", children: [
              /* @__PURE__ */ jsx(Icon, { name: "warning" }),
              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepInvalid"]) })
            ] }),
            form.isValid && !hasError && /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-form-navigation__item-icon adyen-kyc-form-navigation__item-icon--success", children: [
              /* @__PURE__ */ jsx(Icon, { name: "checkmark-small" }),
              /* @__PURE__ */ jsx("span", { className: "adyen-kyc-u-screen-reader-only", children: t(($) => $["formStepCompleted"]) })
            ] })
          ]
        }
      )
    },
    form.formId
  );
};
function FormNavigation({
  forms,
  activeForm,
  gotoForm,
  validateForm,
  className,
  taskName,
  verificationErrors
}) {
  const { t } = useTranslation("common");
  const userEvents = useAnalyticsContext();
  const taskNameTranslated = t(($) => $[taskName]);
  const getFormIndex = (form) => forms.findIndex((f) => f.formId === form.formId);
  const goToForm = (form) => () => {
    if (form.formId === activeForm.formId) return;
    gotoForm(getFormIndex(form));
    trackNavigation({
      userEvents,
      actionType: "navigate",
      toForm: form.formName,
      label: form.formName,
      returnValue: "success"
    });
  };
  const getNavigateHandler = (form, activeForm2) => {
    const priorForms = forms.slice(0, getFormIndex(form));
    const allPriorFormsValid = priorForms.every((subForm) => subForm.isValid);
    if (allPriorFormsValid || !validateForm) {
      return goToForm(form);
    }
    return activeForm2.isValid ? void 0 : () => {
      trackNavigation({
        userEvents,
        actionType: "navigate",
        toForm: form.formName,
        label: form.formName,
        returnValue: "validation error"
      });
      validateForm();
    };
  };
  return /* @__PURE__ */ jsxs("div", { className: cx("adyen-kyc-form-navigation", className), children: [
    /* @__PURE__ */ jsx(
      Typography,
      {
        el: "h3",
        variant: "body",
        color: "secondary",
        className: "adyen-kyc-form-navigation__header",
        children: taskNameTranslated
      }
    ),
    forms && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        Typography,
        {
          color: "tertiary",
          variant: "caption-stronger",
          className: "adyen-kyc-form-navigation__step-count",
          children: t(($) => $["stepsX/YofForm"], {
            activeFormIndex: getFormIndex(activeForm) + 1,
            totalForms: forms.length,
            taskNameTranslated
          })
        }
      ),
      /* @__PURE__ */ jsx("ul", { className: "adyen-kyc-form-navigation__items", children: forms.map((form) => /* @__PURE__ */ jsx(
        FormNavigationItem,
        {
          form,
          isActive: form.formId === activeForm.formId,
          onClick: getNavigateHandler(form, activeForm),
          hasVerificationErrors: Boolean(verificationErrors?.[form.formId] ?? false)
        },
        form.formId
      )) })
    ] })
  ] });
}
export {
  FormNavigation as F
};
