;
{
  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] = "6c56da5d-76d0-4da6-babd-239e416fed9c", e._sentryDebugIdIdentifier = "sentry-dbid-6c56da5d-76d0-4da6-babd-239e416fed9c");
  } catch (e) {
  }
}
;
import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
import cx from "classnames";
import { r as Icon, z as Typography, p as useAnalyticsContext, a7 as noop } from "./StoreProvider-CqQrndhS.js";
import { a as useId } from "./useId-BZ0PA7jP.js";
import { useRef } from "preact/hooks";
import { K as KEYBOARD_KEYS } from "./Modal-1lLoobr9.js";
const tileContainer = "adyen-kyc-tile-container";
const tile = "adyen-kyc-tile";
const tileIcon = "adyen-kyc-tile-icon";
const tileTitle = "adyen-kyc-tile-title";
const tileCheckbox = "adyen-kyc-tile-checkbox";
const tileContainerHorizontal = "adyen-kyc-tile-container-horizontal";
const tileLabel = "adyen-kyc-tile-label";
const styles$1 = {
  tileContainer,
  tile,
  tileIcon,
  tileTitle,
  tileCheckbox,
  tileContainerHorizontal,
  tileLabel
};
function Tile({
  checked,
  disabled,
  icon,
  id,
  inputType = "checkbox",
  isHorizontal,
  label,
  name,
  onChange,
  subTitle,
  value
}) {
  const inputNode = useRef(null);
  const uniqId = useId("tile");
  const idUse = id ?? uniqId;
  const handleChange = (e) => {
    if (disabled) return;
    onChange?.(e.currentTarget.checked);
    inputNode.current?.focus();
  };
  const handleClick = (e) => {
    if (disabled || inputType === "radio") return;
    if (checked) {
      e.preventDefault();
      onChange?.(false);
      inputNode.current?.focus();
    }
  };
  const handleOnKeyDown = (e) => {
    if (e.key === KEYBOARD_KEYS.enter || e.key === KEYBOARD_KEYS.space) {
      e.preventDefault();
      if (disabled) return;
      if (inputType === "radio" && !checked) {
        onChange?.(true);
        inputNode.current?.focus();
      } else if (inputType === "checkbox") {
        onChange?.(!checked);
        inputNode.current?.focus();
      }
    }
  };
  return /* @__PURE__ */ jsxs(
    "div",
    {
      className: cx(styles$1.tileContainer, {
        [styles$1.tileContainerHorizontal]: isHorizontal
      }),
      children: [
        /* @__PURE__ */ jsx(
          "input",
          {
            ref: inputNode,
            className: styles$1.tileCheckbox,
            disabled,
            checked: !!checked,
            value,
            id: idUse,
            name,
            type: inputType,
            onKeyDown: handleOnKeyDown,
            onChange: handleChange,
            onClick: handleClick,
            "aria-disabled": disabled,
            tabIndex: disabled ? -1 : 0
          }
        ),
        /* @__PURE__ */ jsxs("label", { htmlFor: idUse, className: styles$1.tile, children: [
          icon && /* @__PURE__ */ jsx("div", { className: styles$1.tileIcon, children: /* @__PURE__ */ jsx(Icon, { name: icon, testId: icon }) }),
          /* @__PURE__ */ jsxs("div", { className: styles$1.tileLabel, children: [
            /* @__PURE__ */ jsx(Typography, { el: "h4", variant: "body-strongest", className: styles$1.tileTitle, children: label }),
            subTitle && /* @__PURE__ */ jsx(Typography, { el: "p", variant: "body", children: subTitle })
          ] })
        ] })
      ]
    }
  );
}
const tileGroup = "adyen-kyc-tile-group";
const tileGroupError = "adyen-kyc-tile-group-error";
const tileGroupErrorIcon = "adyen-kyc-tile-group-error-icon";
const tileGroupHorizontal = "adyen-kyc-tile-group-horizontal";
const styles = {
  tileGroup,
  tileGroupError,
  tileGroupErrorIcon,
  tileGroupHorizontal
};
function TileGroup({
  tiles,
  selected,
  allowMultiple = false,
  isHorizontal,
  name: nameProp,
  maxSelected = Infinity,
  errorMessage,
  onChange = noop,
  enableTracking = false,
  trackingFieldName
}) {
  const uniqName = useId("tile");
  const name = nameProp ?? uniqName;
  const finalName = allowMultiple ? `${name}[]` : name;
  const inputType = allowMultiple ? "checkbox" : "radio";
  const userEvents = useAnalyticsContext();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    !!errorMessage && /* @__PURE__ */ jsxs("div", { "aria-live": "polite", className: styles.tileGroupError, children: [
      /* @__PURE__ */ jsx("span", { className: styles.tileGroupErrorIcon, children: /* @__PURE__ */ jsx(Icon, { name: "field-error" }) }),
      errorMessage
    ] }),
    /* @__PURE__ */ jsx(
      "div",
      {
        className: cx(styles.tileGroup, {
          [styles.tileGroupHorizontal]: isHorizontal
        }),
        children: tiles.map((tile2, index) => {
          const { value, id, icon, subTitle, label, disabled } = tile2;
          const handleChange = (checked) => {
            const newSelected = updateSelectedChoices(tile2, checked, selected, allowMultiple);
            if (enableTracking) {
              userEvents.addFieldEvent("Interacted with form field", {
                actionType: "input",
                field: trackingFieldName ?? name,
                returnValue: typeof newSelected === "string" ? newSelected : void 0
              });
            }
            onChange(newSelected);
          };
          return /* @__PURE__ */ jsx(
            Tile,
            {
              name: finalName,
              inputType,
              isHorizontal,
              checked: choiceIsSelected(tile2, selected, allowMultiple),
              label,
              id,
              subTitle,
              icon,
              disabled: !disabled && allowMultiple && selected.length >= maxSelected ? !choiceIsSelected(tile2, selected, allowMultiple) : disabled,
              value,
              onChange: handleChange
            },
            index
          );
        })
      }
    )
  ] });
}
function choiceIsSelected({ value }, selected, allowMultiple) {
  if (!allowMultiple) {
    return value === selected;
  }
  return selected.includes(value);
}
function updateSelectedChoices({ value }, checked, selected, allowMultiple) {
  if (!allowMultiple) {
    return checked ? value : "";
  }
  if (Array.isArray(selected)) {
    if (checked) {
      return allowMultiple ? [...selected, value] : [value];
    }
    return selected.filter((selectedChoice) => selectedChoice !== value);
  }
  return [];
}
export {
  TileGroup as T
};
