import { jsx as e, jsxs as y } from "react/jsx-runtime";
import { forwardRef as O, Fragment as B } from "react";
import { cx as A } from "../../utils/classNames.js";
import { useArrowTheme as C } from "../../hooks/useArrowTheme.js";
import { ListStyle as I, ListBackground as T, ListSize as x, ListItemType as N, ImageType as u } from "./Lists.types.js";
import { Link as z } from "../link/Link.js";
import { ButtonStyledAsLink as P } from "../button-styled-as-link/ButtonStyledAsLink.js";
import { Toggle as w } from "../toggle/Toggle.js";
function D(t, o) {
  return t === "small" && o === u.APP ? 54 : t === "large" && o === u.DEVICE ? 85 : 70;
}
function $(t) {
  return t === "small" ? "small" : "large";
}
function j({ item: t, size: o, isInverse: r }) {
  const {
    label: d,
    type: l,
    icon: n,
    optionalBody: c,
    image: f,
    imageType: m,
    imageA11yLabel: h,
    href: s,
    focused: p,
    linkText: i,
    id: a,
    disabled: L,
    toggleChecked: S,
    chevronIcon: k
  } = t, _ = D(o, m), b = $(o);
  let v = d;
  if (l === N.NAV && s !== "")
    v = /* @__PURE__ */ y(
      "a",
      {
        className: A("tdds-list__item-nav", { "force-focus": !!p }),
        href: s || void 0,
        children: [
          /* @__PURE__ */ e("span", { children: d }),
          k
        ]
      }
    );
  else if (l === N.TOGGLE) {
    const g = [];
    (n || f) && h && g.push(`${a}-leading-decoration`), c && g.push(`${a}-optional-body`);
    const E = g.length > 0 ? g.join(" ") : void 0;
    v = /* @__PURE__ */ e(
      w,
      {
        label: d,
        inverse: r || void 0,
        id: a || "",
        focused: p,
        describedBy: E,
        disabled: L,
        checked: S
      }
    );
  }
  return /* @__PURE__ */ y("li", { className: "tdds-list__item", role: "listitem", "data-type": l, children: [
    m === u.ICON && n ? /* @__PURE__ */ e(B, { children: n }) : null,
    m !== u.ICON && f ? /* @__PURE__ */ e(
      "img",
      {
        src: f,
        alt: h || "",
        width: _,
        height: _,
        className: m === u.APP ? "tdds-list__item-app-image" : void 0,
        id: `${a}-leading-decoration`
      }
    ) : null,
    /* @__PURE__ */ y("span", { className: "tdds-list__item-content", children: [
      /* @__PURE__ */ e("span", { className: "tdds-list__item-label", children: v }),
      c ? /* @__PURE__ */ e(
        "span",
        {
          className: "tdds-list__item-body",
          id: `${a}-optional-body`,
          children: c
        }
      ) : null
    ] }),
    l === N.LINK && s && i ? /* @__PURE__ */ e(
      z,
      {
        href: s,
        label: i,
        inverse: r || void 0,
        size: b,
        focused: p,
        disabled: L,
        monochrome: !0
      }
    ) : null,
    l === N.BUTTON_STYLED_AS_LINK && i ? /* @__PURE__ */ e(
      P,
      {
        label: i,
        inverse: r || void 0,
        size: b,
        disabled: L,
        monochrome: !0
      }
    ) : null
  ] });
}
const R = O(
  ({
    listItems: t,
    size: o = x.SMALL,
    background: r = T.NONE,
    listStyle: d = I.DIVIDER,
    elevation: l = !1,
    inverse: n,
    className: c,
    ...f
  }, m) => {
    const h = C(), s = n ?? h.inverse, p = d === I.CONTAIN && r !== T.NONE && l;
    return /* @__PURE__ */ e(
      "ul",
      {
        ref: m,
        className: A("tdds-list", c),
        "data-inverse": s || void 0,
        "data-size": o,
        "data-style": d,
        "data-background": r,
        "data-elevation": p || void 0,
        role: "list",
        ...f,
        children: t.filter((i) => !!i.label).map((i, a) => /* @__PURE__ */ e(
          j,
          {
            item: i,
            size: o,
            isInverse: s
          },
          i.id || a
        ))
      }
    );
  }
);
R.displayName = "Lists";
export {
  R as Lists
};
//# sourceMappingURL=Lists.js.map
