;
{
  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] = "5e80dab2-3f79-4f47-be52-29387f28c6ed", e._sentryDebugIdIdentifier = "sentry-dbid-5e80dab2-3f79-4f47-be52-29387f28c6ed");
  } catch (e) {
  }
}
;
import { jsx, jsxs } from "preact/jsx-runtime";
import { useMemo, useRef, useState, useContext } from "preact/hooks";
import cx from "classnames";
import { p as useAnalyticsContext, u as useTranslation, V as Button } from "./StoreProvider-CqQrndhS.js";
import { L as LoaderWrapper } from "./LoaderWrapper-Dr1uK-LS.js";
import { M as MaybeModal } from "./MaybeModal-C21jAgAp.js";
import { P as ProgressBar } from "./ProgressBar-B7gTQncy.js";
import { F as FormRouterContextProvider } from "./dropinUtils-G5Ua27s3.js";
import { C as Confirm } from "./Confirm-BeimUgOe.js";
import { S as Summary } from "./Summary-6z7-keBb.js";
import { createContext } from "preact";
const FormContext = createContext(null);
function FormContextProvider({
  children,
  form
}) {
  const contextValue = useMemo(
    () => ({
      form
    }),
    [form]
  );
  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children });
}
const formFlow = "adyen-kyc-form-flow";
const formFlowContent = "adyen-kyc-form-flow-content";
const formFlowFooter = "adyen-kyc-form-flow-footer";
const formFlowFooterBorder = "adyen-kyc-form-flow-footer-border";
const formFlowActions = "adyen-kyc-form-flow-actions";
const formFlowPrimaryActions = "adyen-kyc-form-flow-primary-actions";
const styles = {
  formFlow,
  formFlowContent,
  formFlowFooter,
  formFlowFooterBorder,
  formFlowActions,
  formFlowPrimaryActions
};
const FormFlow = ({
  asModal = false,
  children,
  currentStep = 0,
  disableBackButton,
  disableNextButton,
  nextButtonLoading = false,
  // used to separate button loading state from loading wrapper
  forms,
  activeForm,
  gotoFormByFormIndex,
  handleBackClick,
  handleCancelClick,
  handleNextClick,
  loadingStatus,
  summary,
  totalSteps = 1
}) => {
  const contentRef = useRef(null);
  const userEvents = useAnalyticsContext();
  const { t } = useTranslation("common");
  const [isConfirmPresented, setIsConfirmPresented] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const isLoading = loadingStatus === "loading";
  const isActionDisabled = isSubmitting || isConfirmPresented || isLoading;
  const hasBackButton = !!handleBackClick;
  const hasCancelButton = !!handleCancelClick;
  const isFirstStep = currentStep === 0;
  const isLastStep = currentStep === totalSteps - 1;
  const isSingleStepForm = totalSteps < 2;
  const progress = Math.floor(currentStep / (totalSteps - 1) * 100);
  const scrollToTop = () => {
    if (contentRef.current) {
      contentRef.current.scroll({
        top: 0,
        behavior: "smooth"
      });
    }
  };
  const handleSubmit = () => {
    setIsSubmitting(true);
    Promise.resolve(handleNextClick()).then(() => {
      setIsSubmitting(false);
      scrollToTop();
    });
  };
  const handleNext = () => {
    scrollToTop();
    handleNextClick();
  };
  const handleBack = () => {
    scrollToTop();
    handleBackClick?.();
  };
  const handleDismiss = () => {
    if (!hasCancelButton) {
      return;
    }
    setIsConfirmPresented(true);
  };
  const handleCancelDismiss = () => {
    userEvents.addPageEvent("Closed modal", {
      actionType: "close",
      label: "cancel"
    });
    setIsConfirmPresented(false);
  };
  const handleConfirmDismiss = () => {
    userEvents.addPageEvent("Clicked button", {
      actionType: "navigate",
      label: "leave"
    });
    setIsConfirmPresented(false);
    handleCancelClick?.();
  };
  const footerClassName = cx(styles.formFlowFooter, {
    [styles.formFlowFooterBorder]: isSingleStepForm
  });
  return /* @__PURE__ */ jsxs(
    MaybeModal,
    {
      inline: !asModal,
      onClose: handleDismiss,
      size: "large",
      showCloseButton: hasCancelButton,
      children: [
        /* @__PURE__ */ jsxs(
          "div",
          {
            ref: contentRef,
            className: styles.formFlow,
            "data-form-valid": activeForm.isValid,
            "data-testid": "form-flow",
            children: [
              /* @__PURE__ */ jsx("div", { className: styles.formFlowContent, children: /* @__PURE__ */ jsx(LoaderWrapper, { status: loadingStatus, formOpacityWhenLoading: 0, loaderSize: "large", children: /* @__PURE__ */ jsx(FormRouterContextProvider, { forms, setFormIndex: gotoFormByFormIndex, children: isLastStep && summary !== void 0 ? /* @__PURE__ */ jsx(Summary, { ...summary, forms, gotoForm: gotoFormByFormIndex }) : children }) }) }),
              /* @__PURE__ */ jsxs("div", { className: footerClassName, children: [
                !isSingleStepForm && /* @__PURE__ */ jsx(ProgressBar, { ariaLabel: t(($) => $["progress"]), progress }),
                /* @__PURE__ */ jsxs("div", { className: styles.formFlowActions, children: [
                  isFirstStep && hasCancelButton && /* @__PURE__ */ jsx(
                    Button,
                    {
                      disabled: isActionDisabled || disableBackButton,
                      onClick: handleDismiss,
                      variant: "secondary",
                      children: t(($) => $["cancel"])
                    }
                  ),
                  !isFirstStep && hasBackButton && /* @__PURE__ */ jsx(
                    Button,
                    {
                      disabled: isActionDisabled || disableBackButton,
                      icon: "chevron-left",
                      onClick: handleBack,
                      variant: "secondary",
                      children: t(($) => $["back"])
                    }
                  ),
                  /* @__PURE__ */ jsx("div", { className: styles.formFlowPrimaryActions, children: isLastStep ? /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: t(($) => $["submit"]) }) : /* @__PURE__ */ jsx(
                    Button,
                    {
                      onClick: handleNext,
                      disabled: isActionDisabled || disableNextButton,
                      loading: nextButtonLoading,
                      children: t(($) => $["continue"])
                    }
                  ) })
                ] })
              ] })
            ]
          }
        ),
        isConfirmPresented && /* @__PURE__ */ jsx(
          Confirm,
          {
            confirmText: t(($) => $["leave"]),
            description: t(($) => $["unsavedChangesDescription"]),
            onCancel: handleCancelDismiss,
            onConfirm: handleConfirmDismiss,
            title: t(($) => $["unsavedChanges"])
          }
        )
      ]
    }
  );
};
function useFormContext() {
  const context = useContext(FormContext);
  return context;
}
export {
  FormContextProvider as F,
  FormFlow as a,
  useFormContext as u
};
