import { jsxs as p, Fragment as v, jsx as o } from "@emotion/react/jsx-runtime";
import { useCallback as $ } from "react";
import { useEnvironment as F } from "@m4l/core";
import { ICONS as g } from "../icons.js";
import { ItemLabelTypografyStyled as J, ItemDescriptionTypografyStyled as K, ItemWrapperStyled as Q, ItemCheckboxStyled as U, ItemIconStyled as Y, ItemContentWrapperStyled as Z, GroupLabelCountWrapperStyled as z, GroupLabelTypografyStyled as ee, ChipCountTypografyStyled as te, GroupWrapperStyled as ne, GroupHeaderStyled as oe, GroupCheckboxStyled as le, GroupIconStyled as re, GroupToggleButtonStyled as ae } from "../slots/styled.js";
const ue = ({
  isItemSelected: u,
  disabled: b = !1,
  size: n = "medium",
  variant: l = "standard",
  checkboxSize: m = "medium",
  handleItemToggle: h,
  renderItem: x,
  expandedGroups: E,
  isGroupFullySelected: L,
  isGroupPartiallySelected: T,
  getGroupItems: w,
  indeterminateBehavior: D = "indicate-some",
  renderGroup: P,
  groupable: f = !0,
  showCheckboxOnGroup: W = !0,
  handleGroupExpandToggle: G,
  handleGroupToggle: A
}) => {
  const { host_static_assets: y, environment_assets: C } = F(), B = `${y}/${C}/frontend/components/checkable_list/assets/icons/${g.EXPANDED_LIST}`, N = `${y}/${C}/frontend/components/checkable_list/assets/icons/${g.COMPACT_LIST}`, H = `${y}/${C}/frontend/components/checkable_list/assets/icons/${g.SEARCH}`, M = `${y}/${C}/frontend/components/no_item_selected/assets/icons/no_selected.svg`, S = $(
    (e, i) => {
      const r = u(e.id), t = !!(b || e.disabled), a = x?.({
        item: e,
        checked: r,
        index: i,
        disabled: t,
        size: n,
        variant: l
      }), I = /* @__PURE__ */ p(v, { children: [
        /* @__PURE__ */ o(
          J,
          {
            ownerState: { size: n, variant: l, disabled: t },
            variant: "bodyStandard",
            color: "text.primary",
            disabled: t,
            children: e.label
          }
        ),
        e.description && /* @__PURE__ */ o(
          K,
          {
            ownerState: { size: n, variant: l },
            variant: "bodyStandard",
            color: "text.secondary",
            disabled: t,
            children: e.description
          }
        )
      ] });
      return /* @__PURE__ */ p(
        Q,
        {
          ownerState: { size: n, variant: l, disabled: t, selected: r },
          role: "option",
          "aria-label": "item",
          "aria-selected": r,
          "aria-disabled": t,
          onClick: () => !t && h(e.id),
          children: [
            /* @__PURE__ */ o(
              U,
              {
                checked: r,
                disabled: t,
                size: m,
                onChange: (d) => {
                  d.stopPropagation(), h(e.id);
                },
                onClick: (d) => d.stopPropagation()
              }
            ),
            e.icon && /* @__PURE__ */ o(Y, { children: e.icon }),
            /* @__PURE__ */ o(Z, { children: a ?? I })
          ]
        }
      );
    },
    [
      u,
      b,
      x,
      n,
      l,
      m,
      h
    ]
  ), k = $(
    (e, i) => {
      const r = E.has(e.id), t = !!(b || e.disabled), a = L(e), I = T(e), d = w(e);
      let c = !1;
      a ? c = !0 : I && D === "indicate-some" && (c = "indeterminate");
      const _ = (s) => {
        s.stopPropagation(), !(t || !f) && G(e.id);
      }, R = (s) => {
        s.stopPropagation(), A(e);
      }, j = d.filter(
        (s) => u(s.id)
      ).length, V = P?.({
        group: e,
        items: d,
        index: i,
        expanded: r,
        disabled: t,
        size: n,
        variant: l,
        checkboxState: c,
        onToggleExpand: _,
        onToggleGroup: R,
        selectedCount: j,
        totalCount: d.length
      }), X = /* @__PURE__ */ p(z, { children: [
        /* @__PURE__ */ o(
          ee,
          {
            ownerState: { size: n, variant: l, disabled: t },
            ellipsis: !0,
            variant: "captionDens",
            children: e.label
          }
        ),
        /* @__PURE__ */ p(
          te,
          {
            ownerState: { size: n, variant: l, disabled: t, color: e.color },
            children: [
              j,
              "/",
              d.length
            ]
          }
        )
      ] }), q = V ?? X;
      return (
        // eslint-disable-next-line jsx-a11y/role-supports-aria-props
        /* @__PURE__ */ o(
          ne,
          {
            ownerState: { size: n, variant: l, grouped: !0, selected: c === !0 },
            role: "group",
            "aria-label": e.label,
            "aria-expanded": r,
            "aria-disabled": t,
            children: /* @__PURE__ */ p(
              oe,
              {
                ownerState: { size: n, variant: l, disabled: t },
                onClick: _,
                children: [
                  W && /* @__PURE__ */ o(
                    le,
                    {
                      checked: c === !0,
                      indeterminate: c === "indeterminate",
                      disabled: t,
                      size: m,
                      onChange: R,
                      onClick: (s) => s.stopPropagation()
                    }
                  ),
                  e.icon && /* @__PURE__ */ o(re, { children: e.icon }),
                  /* @__PURE__ */ o("div", { style: { flex: 1, minWidth: 0 }, children: q }),
                  f && /* @__PURE__ */ o(
                    ae,
                    {
                      size: n,
                      variant: "text",
                      icon: r ? N : B,
                      onClick: _,
                      "aria-label": r ? "Colapsar grupo" : "Expandir grupo"
                    }
                  )
                ]
              }
            )
          }
        )
      );
    },
    [E, b, L, T, w, D, P, n, l, W, m, f, N, B, G, A, u]
  ), O = $(
    ({ index: e, style: i, data: r }) => {
      const a = r[e];
      return a ? (
        /**
         * Sobre este div React-Window aplica los estilos de posicionamiento y tamaño.
         */
        /* @__PURE__ */ o("div", { style: i, children: a.type === "group" ? k(a.data, e) : S(a.data, e) })
      ) : null;
    },
    [k, S]
  );
  return {
    renderItemContent: S,
    renderGroupContent: k,
    renderVirtualizedItem: O,
    urlIconSearch: H,
    urlIconNoResults: M
  };
};
export {
  ue as useCheckableListRender
};
