;
{
  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] = "c43c02a2-f4c6-499a-a06d-1ea62781edf3", e._sentryDebugIdIdentifier = "sentry-dbid-c43c02a2-f4c6-499a-a06d-1ea62781edf3");
  } catch (e) {
  }
}
;
import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
import { useMemo, useState } from "preact/hooks";
import { V as Button, ac as entriesOf, u as useTranslation, bp as splitTaskIdentifier, v as useExperimentsContext, B as useSettingsContext, aa as useI18nContext, C as useGlobalStore, aE as listToRecord, aC as valuesOf, r as Icon, a3 as createLogger } from "./StoreProvider-CqQrndhS.js";
import { M as Modal } from "./Modal-1lLoobr9.js";
import { E as ExperimentNames } from "./types-B7GElie6.js";
import { T as TaskVerificationStatus, S as SettingNames } from "./TaskVerificationStatus-C19Z4x3D.js";
import { I as InputText } from "./InputText-DRSK56ma.js";
import { T as Tag } from "./Tag-DdkVScyr.js";
import { A as Accordion } from "./Accordion-DKS8kkDP.js";
import { C as Checkbox } from "./Checkbox-CyQM2V4n.js";
import { f as formDebugInfo } from "./debugStore-BvbyN1Oi.js";
import MonogonCode from "monogon/preact";
const tabs = "adyen-kyc-tabs";
const styles$3 = {
  tabs
};
const Tabs = ({ tabs: tabs2, activeTab, onChange }) => /* @__PURE__ */ jsx("div", { className: styles$3.tabs, children: tabs2.map(({ name, label, disabled }) => {
  const buttonVariant = activeTab === name ? "secondary" : "tertiary";
  return /* @__PURE__ */ jsx(
    Button,
    {
      onClick: () => {
        onChange(name);
      },
      variant: buttonVariant,
      disabled,
      children: label
    },
    name
  );
}) });
const filterData = (data, searchTerm) => data.filter(({ key }) => key.toLowerCase().includes(searchTerm.toLowerCase()));
const sortData = (data) => [...data].sort(({ key: keyA }, { key: keyB }) => keyA.localeCompare(keyB));
const DebugTable = ({
  data,
  heading,
  searchTerm,
  tagPosition = "after",
  sort = false
}) => {
  const filteredData = useMemo(() => {
    const filtered = searchTerm ? filterData(data, searchTerm) : data;
    return sort ? sortData(filtered) : filtered;
  }, [data, searchTerm]);
  return /* @__PURE__ */ jsxs("div", { children: [
    heading ? /* @__PURE__ */ jsx("h3", { children: heading }) : void 0,
    filteredData.length === 0 ? /* @__PURE__ */ jsxs("p", { children: [
      "No results found for ",
      /* @__PURE__ */ jsx("strong", { children: searchTerm })
    ] }) : /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: filteredData.map(({ key, value, label, variant }) => /* @__PURE__ */ jsxs("tr", { children: [
      tagPosition === "before" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, { variant: variant ?? "grey", children: value }) }) : void 0,
      /* @__PURE__ */ jsxs("td", { children: [
        /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: key }),
        label && /* @__PURE__ */ jsx("span", { children: label })
      ] }),
      tagPosition === "after" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, { variant: variant ?? "grey", children: value }) }) : void 0
    ] }, key)) }) })
  ] });
};
const getSettingVariant = (value) => {
  switch (value) {
    case void 0:
      return "orange";
    case true:
      return "green";
    case false:
      return "red";
    default:
      return "blue";
  }
};
const DebugExperimentsAndSettings = ({
  experiments,
  settings
}) => {
  const [searchTerm, setSearchTerm] = useState("");
  const experimentRows = entriesOf(experiments).map(
    ([experimentName, enabled]) => ({
      key: `${experimentName}`,
      value: enabled ? "Enabled" : "Disabled",
      variant: enabled ? "green" : "red"
    })
  );
  const settingRows = entriesOf(settings).map(([settingName, value]) => ({
    key: settingName,
    value: `${value}`,
    variant: getSettingVariant(value)
  }));
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      InputText,
      {
        name: "search",
        value: searchTerm,
        onInput: (e) => setSearchTerm(e.currentTarget.value),
        placeholder: "Search for Experiments/Settings 🔎",
        trimOnBlur: true,
        spellCheck: false,
        "aria-label": "Search experiments or settings",
        "aria-invalid": false
      }
    ),
    /* @__PURE__ */ jsx(
      DebugTable,
      {
        tagPosition: "before",
        data: experimentRows,
        heading: "Experiments",
        searchTerm,
        sort: true
      }
    ),
    /* @__PURE__ */ jsx(DebugTable, { data: settingRows, heading: "Settings", searchTerm, sort: true })
  ] });
};
const searchInput = "adyen-kyc-searchInput";
const toolbar = "adyen-kyc-toolbar";
const fieldHeader = "adyen-kyc-fieldHeader";
const status = "adyen-kyc-status";
const statusRequired = "adyen-kyc-statusRequired";
const statusOptional = "adyen-kyc-statusOptional";
const statusHidden = "adyen-kyc-statusHidden";
const statusInfo = "adyen-kyc-statusInfo";
const reasonsList = "adyen-kyc-reasonsList";
const reasonItem = "adyen-kyc-reasonItem";
const styles$2 = {
  searchInput,
  toolbar,
  fieldHeader,
  status,
  statusRequired,
  statusOptional,
  statusHidden,
  statusInfo,
  reasonsList,
  reasonItem
};
const statusClassNames = {
  REQUIRED: styles$2.statusRequired,
  OPTIONAL: styles$2.statusOptional,
  INFO: styles$2.statusInfo,
  HIDDEN: styles$2.statusHidden
};
const DebugFormData = () => {
  const debugInfo = formDebugInfo.value;
  const [searchTerm, setSearchTerm] = useState("");
  const [showHidden, setShowHidden] = useState(false);
  const filteredFieldNames = Object.keys(debugInfo).filter((fieldName) => fieldName.toLowerCase().includes(searchTerm.toLowerCase())).filter((fieldName) => showHidden || debugInfo[fieldName].status !== "HIDDEN").sort((a, b) => {
    if (a === "__FORMS__") return -1;
    if (b === "__FORMS__") return 1;
    return a.localeCompare(b);
  });
  if (Object.keys(debugInfo).length === 0) {
    return /* @__PURE__ */ jsx("p", { children: "No form debug data available. Navigate to a form to see its debug info." });
  }
  return /* @__PURE__ */ jsxs("div", { children: [
    /* @__PURE__ */ jsxs("div", { className: styles$2.toolbar, children: [
      /* @__PURE__ */ jsx(
        "input",
        {
          type: "text",
          placeholder: "Search field...",
          value: searchTerm,
          onInput: (e) => setSearchTerm(e.currentTarget.value),
          className: styles$2.searchInput
        }
      ),
      /* @__PURE__ */ jsx(
        Checkbox,
        {
          id: "show-hidden-fields",
          name: "show-hidden-fields",
          label: "Show hidden fields",
          checked: showHidden,
          onChange: () => setShowHidden(!showHidden)
        }
      )
    ] }),
    filteredFieldNames.map((fieldName) => {
      const info = debugInfo[fieldName];
      return /* @__PURE__ */ jsxs(Accordion, { onToggle: () => {
      }, children: [
        /* @__PURE__ */ jsx("template", { slot: "title", children: /* @__PURE__ */ jsxs("div", { className: styles$2.fieldHeader, children: [
          /* @__PURE__ */ jsx("span", { className: styles$2.status, children: fieldName }),
          " ",
          /* @__PURE__ */ jsxs("span", { className: statusClassNames[info.status], children: [
            "(",
            info.status,
            ")"
          ] })
        ] }) }),
        /* @__PURE__ */ jsx("template", { slot: "content", children: /* @__PURE__ */ jsx("ul", { className: styles$2.reasonsList, children: info.reasons.map((reason, i) => /* @__PURE__ */ jsx("li", { className: styles$2.reasonItem, children: reason }, i)) }) })
      ] }, fieldName);
    })
  ] });
};
const DebugLegalEntityData = ({ legalEntityData }) => {
  if (!legalEntityData) return /* @__PURE__ */ jsx(Fragment, {});
  const { rootLegalEntity, rootLegalEntityType } = legalEntityData;
  const uboDetails = rootLegalEntity.entityAssociations?.map(
    ({ name, type, jobTitle }) => (
      // If `name` is undefined, replace the tuple with `null` to easily filter it out later. Checking this to ensure that the 'data' for DebugTable always has a keyName.
      name ? {
        key: name,
        value: `${type}`,
        label: jobTitle,
        variant: "blue"
      } : null
    )
  ).filter(Boolean) ?? [];
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs("span", { children: [
      "Root legal entity type: ",
      /* @__PURE__ */ jsx(Tag, { children: rootLegalEntityType })
    ] }),
    uboDetails.length ? /* @__PURE__ */ jsx(DebugTable, { data: uboDetails, heading: "Decision Makers" }) : void 0,
    rootLegalEntity ? /* @__PURE__ */ jsx(MonogonCode, { lang: "json", content: JSON.stringify(rootLegalEntity, null, 2) }) : void 0
  ] });
};
const DebugMetadata = ({
  metadata: { sdkVersion, locale, rootLegalEntityId }
}) => {
  const rows = [
    { key: "SDK version", value: sdkVersion, variant: "green" },
    { key: "Locale", value: locale, variant: "blue" },
    { key: "Root legal entity ID", value: rootLegalEntityId, variant: "teal" }
  ];
  return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__meta", children: /* @__PURE__ */ jsx(DebugTable, { data: rows }) });
};
const debugModal = "adyen-kyc-debug-modal";
const debugHeader = "adyen-kyc-debug-header";
const footer = "adyen-kyc-footer";
const footerCopyStatus = "adyen-kyc-footer-copy-status";
const content = "adyen-kyc-content";
const styles$1 = {
  debugModal,
  debugHeader,
  footer,
  footerCopyStatus,
  content
};
const header = "adyen-kyc-header";
const taskName = "adyen-kyc-task-name";
const table = "adyen-kyc-table";
const styles = {
  header,
  taskName,
  table
};
const DebugTaskStatuses = ({ taskStatuses }) => {
  const { t } = useTranslation("common");
  return /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: styles.header, children: [
      /* @__PURE__ */ jsx("th", { children: t(($) => $["task"]) }),
      /* @__PURE__ */ jsx("th", { children: t(($) => $["status"]) }),
      /* @__PURE__ */ jsx("th", { children: t(($) => $["reason"]) })
    ] }) }),
    /* @__PURE__ */ jsx("tbody", { children: entriesOf(taskStatuses).sort(([t1], [t2]) => t1.localeCompare(t2)).map(([task, status2]) => {
      const { taskType, id } = splitTaskIdentifier(task);
      return /* @__PURE__ */ jsxs("tr", { children: [
        /* @__PURE__ */ jsxs("td", { className: styles.taskName, children: [
          taskType,
          id ? `: ${id}` : ""
        ] }),
        status2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TaskVerificationStatus, { status: status2.status }) }),
          /* @__PURE__ */ jsxs("td", { children: [
            t(($) => $[status2.reason]),
            /* @__PURE__ */ jsx(ExplainDetails, { status: status2 })
          ] })
        ] }) : /* @__PURE__ */ jsx(Fragment, {})
      ] }, task);
    }) })
  ] });
};
const ExplainDetails = ({ status: status2 }) => {
  const { reason, details } = status2;
  switch (reason) {
    case "invalidInputError": {
      const verificationError = details.verificationError;
      const subErrors = verificationError.subErrors;
      return /* @__PURE__ */ jsxs("div", { children: [
        verificationError.code,
        ": ",
        verificationError.message,
        subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
          subError.code,
          ": ",
          subError.message
        ] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
      ] });
    }
    case "dataMissingError": {
      const verificationError = details.verificationError;
      const subErrors = verificationError.subErrors;
      return /* @__PURE__ */ jsxs("div", { children: [
        verificationError.code,
        ": ",
        verificationError.message,
        subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
          subError.code,
          ": ",
          subError.message
        ] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
      ] });
    }
    case "pendingCapabilities": {
      const pendingCapabilities = details.pendingCapabilities;
      return /* @__PURE__ */ jsx("ul", { children: pendingCapabilities.map((capabilityName) => /* @__PURE__ */ jsx("li", { children: capabilityName }, capabilityName)) });
    }
  }
};
const logger = createLogger();
const DebugModal = ({ onExit }) => {
  const { isExperimentEnabled } = useExperimentsContext();
  const { getSetting } = useSettingsContext();
  const [debugInfoCopied, setDebugInfoCopied] = useState(false);
  const { i18n } = useI18nContext();
  const [tab, setTab] = useState("metadata");
  const rootLegalEntity = useGlobalStore().rootLegalEntity.value;
  const formDebugAvailable = Object.keys(formDebugInfo.value).length > 0;
  const metadata = {
    sdkVersion: "3.95.1",
    locale: i18n.locale,
    rootLegalEntityId: rootLegalEntity.id
  };
  const experiments = listToRecord(valuesOf(ExperimentNames), isExperimentEnabled);
  const settings = listToRecord(valuesOf(SettingNames), getSetting);
  const taskStatuses = useGlobalStore().taskStatuses.value;
  const legalEntityData = {
    rootLegalEntity,
    rootLegalEntityType: rootLegalEntity.type
  };
  const copyToClipboard = async () => {
    const toCopy = {
      metadata,
      experiments,
      settings,
      taskStatuses,
      legalEntityData
    };
    await window.navigator.clipboard.writeText(JSON.stringify(toCopy, null, 2));
    setDebugInfoCopied(true);
    setTimeout(() => {
      setDebugInfoCopied(false);
    }, 5e3);
  };
  const TABS = [
    {
      name: "metadata",
      label: "Metadata"
    },
    {
      name: "experimentsSettings",
      label: "Experiments & Settings"
    },
    {
      name: "taskStatuses",
      label: "Task Statuses"
    },
    {
      name: "legalEntityData",
      label: "Legal Entity Data"
    }
  ];
  if (formDebugAvailable) {
    TABS.push({
      name: "formConfig",
      label: "Form Config"
    });
  }
  return /* @__PURE__ */ jsx(Modal, { size: "fullscreen", onClose: onExit, ariaLabel: "Debug", children: /* @__PURE__ */ jsxs("div", { className: styles$1.debugModal, children: [
    /* @__PURE__ */ jsxs("div", { className: styles$1.debugHeader, children: [
      /* @__PURE__ */ jsx("h1", { children: "Debug" }),
      " ",
      /* @__PURE__ */ jsx(Tabs, { activeTab: tab, onChange: (tab2) => setTab(tab2), tabs: TABS })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: styles$1.content, children: [
      tab === "metadata" ? /* @__PURE__ */ jsx(DebugMetadata, { metadata }) : void 0,
      tab === "taskStatuses" ? /* @__PURE__ */ jsx(DebugTaskStatuses, { taskStatuses }) : void 0,
      tab === "experimentsSettings" ? /* @__PURE__ */ jsx(DebugExperimentsAndSettings, { experiments, settings }) : void 0,
      tab === "legalEntityData" ? /* @__PURE__ */ jsx(DebugLegalEntityData, { legalEntityData }) : void 0,
      tab === "formConfig" ? /* @__PURE__ */ jsx(DebugFormData, {}) : void 0
    ] }),
    /* @__PURE__ */ jsx("div", { className: styles$1.footer, children: /* @__PURE__ */ jsxs("div", { children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          icon: "document",
          onClick: () => {
            copyToClipboard().catch((error) => {
              logger.error("Error copying to clipboard:", error);
            });
          },
          children: "Copy debug info"
        }
      ),
      debugInfoCopied ? /* @__PURE__ */ jsxs("span", { className: styles$1.footerCopyStatus, children: [
        /* @__PURE__ */ jsx(Icon, { name: "check" }),
        " Copied!"
      ] }) : void 0
    ] }) })
  ] }) });
};
export {
  DebugModal
};
