import { jsx as e } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useContext as R, useRef as M, useLayoutEffect as P, useMemo as A } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import Y from "classnames";
import { TimelineContext as U } from "../context.js";
import { formatDistanceStrict as q, DateText as z } from "./DateText.js";
import { ButtonVariant as $ } from "../../Button/types.js";
import p from "../../Typography/Typography.js";
import { TypographyVariant as _, TypographyElement as h } from "../../Typography/types.js";
import { Tag as j } from "../../Tag/Tag.js";
import K from "../../StructuredList/StructuredList.js";
/* empty css                  */
import F from "../../../../hooks/useUniqueId.js";
import H from "../../../../core/Context/preact/useCoreContext.js";
import { Icon as J } from "../../Icon/Icon.js";
import Q from "../../Button/Button.js";
const W = {
  day: "common.timeline.timelineItem.timeGap.unit.day"
};
function pe({ dataList: y = null, description: r = null, status: f = "black", tag: I, timestamp: i, title: o = null, children: N }) {
  const { i18n: a } = H(), g = R(U);
  if (!g)
    throw new Error("TimelineItem must be used within a Timeline component");
  const { registerTimelineEntry: T, entries: l, showAll: x, showMoreIndex: C, hiddenItems: w, visibleIndexes: m, timeGapLimit: s, toggleShowAll: D } = g, b = M(F());
  P(() => {
    const t = {
      title: o || void 0,
      description: r || void 0,
      date: i.date,
      _instanceId: b.current
    };
    return T(t);
  }, [T, o, r, i.date]);
  const n = A(() => l.findIndex((v) => v._instanceId === b.current), [l]), d = x || !m, k = n === -1 ? d : d ? !0 : m.includes(n), c = A(() => {
    if (!s || n <= 0)
      return null;
    const t = l[n - 1];
    if (!t || !(d || m && m.includes(n - 1)))
      return null;
    const L = i.date, B = t.date, u = q(B, L, { unit: s.unit || "day" }), O = a.get(W[u.unit], {
      values: { value: u.value },
      count: u.value
    });
    return s.thresholdAmount < u.value ? O : null;
  }, [s, l, n, d, m, i.date, a]), S = c ? a.get("common.timeline.timelineItem.timeGap.a11y.label", { values: { timeGap: c } }) : "", V = w && C === n, E = n === l.length - 1, G = Y("adyen-pe-timeline-item__icon", {
    [`adyen-pe-timeline-item__icon--${f}`]: f
  });
  return k ? /* @__PURE__ */ e("li", { className: "adyen-pe-timeline-item", children: [
    c && /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__row", children: [
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__marker", "aria-hidden": "true", children: [
        /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__icon adyen-pe-timeline-item__icon--timegap" }),
        /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__separator" })
      ] }),
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__content", children: /* @__PURE__ */ e(p, { className: "adyen-pe-timeline-item__timegap", variant: _.CAPTION, "aria-label": S, children: c }) })
    ] }),
    /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__row", children: [
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__marker", "aria-hidden": "true", children: [
        /* @__PURE__ */ e(J, { name: "square-small-fill", className: G }),
        !E && /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__separator", "data-testid": "last-timeline-item-separator" })
      ] }),
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__content", children: [
        o && /* @__PURE__ */ e("div", { role: "heading", "aria-level": 2, children: /* @__PURE__ */ e(
          p,
          {
            el: h.DIV,
            variant: _.BODY,
            strongest: !0,
            className: "adyen-pe-timeline-item__title",
            children: /* @__PURE__ */ e("span", { children: o })
          }
        ) }),
        i && /* @__PURE__ */ e(p, { className: "adyen-pe-timeline-item__timestamp", el: h.DIV, variant: _.CAPTION, children: [
          /* @__PURE__ */ e(z, { date: i.date, format: i.format, timezone: i.timezone }),
          i.value && ` ${i.value}`
        ] }),
        (r || N) && /* @__PURE__ */ e(p, { el: h.DIV, variant: _.BODY, className: "adyen-pe-timeline-item__description", children: N || r }),
        y && /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__data-list", children: /* @__PURE__ */ e(
          K,
          {
            condensed: !0,
            align: "start",
            items: y.map((t) => ({
              label: t.label,
              value: t.value,
              key: t.key,
              id: t.key
            }))
          }
        ) }),
        I && /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__tag", children: /* @__PURE__ */ e(j, { ...I }) })
      ] })
    ] }),
    V && /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__row", children: [
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__marker", "aria-hidden": "true", children: /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__separator" }) }),
      /* @__PURE__ */ e("div", { className: "adyen-pe-timeline-item__content", children: /* @__PURE__ */ e(Q, { className: "adyen-pe-timeline__show-more", variant: $.TERTIARY, onClick: D, children: x ? a.get("common.timeline.timelineItem.showLess") : a.get("common.timeline.timelineItem.showMoreItems", { values: { items: w } }) }) })
    ] })
  ] }) : null;
}
export {
  pe as TimelineItem
};
