import { jsxs as u, jsx as e } from "react/jsx-runtime";
import { EmojiSettings as N } from "@udecode/plate-emoji";
import { useCallback as b } from "react";
const f = ({ index: w, emoji: t, onSelect: a, onMouseOver: r }) => {
  var n, s;
  return /* @__PURE__ */ u(
    "button",
    {
      type: "button",
      "aria-label": (n = t == null ? void 0 : t.skins[0]) == null ? void 0 : n.native,
      tabIndex: -1,
      "data-index": w,
      onClick: () => a(t),
      onMouseEnter: () => r(t),
      onMouseLeave: () => r(),
      className: "tw-group/emojibutton tw-relative tw-flex tw-h-9 tw-w-9 tw-cursor-pointer tw-items-center tw-justify-center tw-border-none tw-bg-transparent tw-text-2xl tw-leading-none",
      children: [
        /* @__PURE__ */ e(
          "div",
          {
            "aria-hidden": "true",
            className: "tw-absolute tw-inset-0 tw-rounded-full tw-bg-[rgba(0,0,0,0.05)] tw-opacity-0 group-hover/emojibutton:tw-opacity-100"
          }
        ),
        /* @__PURE__ */ e("span", { "data-emoji-set": "native", className: "tw-relative", children: (s = t == null ? void 0 : t.skins[0]) == null ? void 0 : s.native })
      ]
    }
  );
}, R = ({ row: w, emojiLibrary: t, onSelectEmoji: a, onMouseOver: r }) => /* @__PURE__ */ e("div", { "data-index": w.id, className: "tw-flex", children: w.elements.map((n, s) => /* @__PURE__ */ e(
  f,
  {
    index: s,
    emoji: t.getEmoji(n),
    onSelect: a,
    onMouseOver: r
  },
  n
)) }, w.id);
function B({
  i18n: w,
  onSelectEmoji: t,
  onMouseOver: a,
  emojiLibrary: r,
  isSearching: n = !1,
  searchResult: s,
  visibleCategories: d,
  refs: h,
  settings: c = N
}) {
  const o = c.perLine.value * c.buttonSize.value, p = b(
    (l) => d.has(l) ? d.get(l) : !1,
    [d]
  ), k = b(() => r.getGrid().sections().map(({ id: l }) => {
    const i = r.getGrid().section(l), { buttonSize: x } = c;
    return /* @__PURE__ */ u("div", { "data-id": l, ref: i.root, style: { width: o }, children: [
      /* @__PURE__ */ e("div", { className: "tw-sticky tw--top-px tw-z-[1] tw-bg-white/90 tw-p-1 tw-backdrop-blur-sm", children: w.categories[l] }),
      /* @__PURE__ */ e(
        "div",
        {
          className: "tw-relative tw-flex tw-flex-wrap",
          style: { height: i.getRows().length * x.value },
          children: p(l) ? i.getRows().map((v, g) => /* @__PURE__ */ e(
            R,
            {
              emojiLibrary: r,
              row: v,
              onSelectEmoji: t,
              onMouseOver: a
            },
            g
          )) : null
        }
      )
    ] }, l);
  }), [r, o, w.categories, p, t, a, c]), m = b(() => /* @__PURE__ */ u("div", { "data-id": "search", style: { width: o }, children: [
    /* @__PURE__ */ e("div", { className: "tw-sticky tw--top-px tw-z-[1] tw-bg-white/90 tw-p-1 tw-backdrop-blur-sm", children: w.searchResult }),
    /* @__PURE__ */ e("div", { className: "tw-relative tw-flex tw-flex-wrap", children: s.map((l, i) => /* @__PURE__ */ e(
      f,
      {
        index: i,
        emoji: r.getEmoji(l.id),
        onSelect: t,
        onMouseOver: a
      },
      l.id
    )) })
  ] }), [r, o, w.searchResult, s, t, a]);
  return /* @__PURE__ */ e(
    "div",
    {
      className: "tw-h-full tw-min-h-[50%] tw-overflow-y-auto tw-overflow-x-hidden tw-px-3 [&::-webkit-scrollbar]:tw-w-4 [&::-webkit-scrollbar-button]:tw-hidden [&::-webkit-scrollbar-button]:tw-h-0 [&::-webkit-scrollbar-button]:tw-w-0 [&::-webkit-scrollbar-thumb]:hover:tw-bg-[#f3f4f6] [&::-webkit-scrollbar-thumb]:tw-min-h-[65px] [&::-webkit-scrollbar-thumb]:tw-rounded-2xl [&::-webkit-scrollbar-thumb]:tw-border-solid [&::-webkit-scrollbar-thumb]:tw-border-4 [&::-webkit-scrollbar-thumb]:tw-border-white [&::-webkit-scrollbar-track]:tw-border-0",
      "data-id": "scroll",
      ref: h.current.contentRoot,
      children: /* @__PURE__ */ e("div", { ref: h.current.content, className: "tw-h-full", children: n ? m() : k() })
    }
  );
}
export {
  B as EmojiPickerContent
};
//# sourceMappingURL=EmojiPickerContent.es.js.map
