import { jsxs as x, jsx as c } from "react/jsx-runtime";
import { memo as E, useState as S, useRef as h, useMemo as B, useCallback as g, useEffect as L } from "react";
import { g2 as w, g3 as $, h as z, g4 as V, cP as D } from "./main-CxoAwMiG.js";
import { p as M } from "./TalkLoading-CJtNYhDp.js";
const O = ({ scrollToCategory: n, activeTab: o }) => /* @__PURE__ */ x("div", { className: "flex overflow-x-auto relative  border-b", children: [
  /* @__PURE__ */ c(
    "span",
    {
      style: {
        transform: `translateX(-${w.findIndex((i) => i.id === o) * 100}%)`
      },
      className: "absolute w-1/6 bottom-0 bg-accent h-1 rounded-full transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]"
    }
  ),
  w.map((e) => /* @__PURE__ */ c(
    "button",
    {
      onClick: () => n(e.id),
      className: `py-2 flex-1 flex items-center justify-center transition-all duration-300 ease-in-out ${o === e.id ? "text-accent font-bold" : "text-tabItem"}`,
      children: e.icon
    },
    e.id
  ))
] });
function _(n, o) {
  let s = null, e = 0;
  return (...i) => {
    const d = Date.now() - e, u = () => {
      n(...i), e = Date.now(), s = null;
    };
    d > o ? u() : s || (s = setTimeout(u, o - d));
  };
}
const C = E(
  ({ emoji: n, onPick: o }) => {
    const s = g(() => o(n), [n, o]), { unicodeToEmoji: e } = D();
    return /* @__PURE__ */ c(
      "div",
      {
        onClick: s,
        className: `cursor-pointer p-[12px] rounded-full w-[54px] h-[54px]
                   flex items-center justify-center text-[32px]
                   hover:bg-gray-100 active:bg-gray-200 select-none transition-colors`,
        children: M(e(n).trim(), {
          className: "  w-[33px] pointer-events-none leading-none",
          parentClassName: "overflow-hidden   h-[33px]"
        })
      }
    );
  }
);
C.displayName = "EmojiButton";
const T = E(({ cat: n, onPick: o, sectionRef: s }) => {
  const e = V[n.id];
  return /* @__PURE__ */ x("div", { ref: s, id: n.id, className: "select-none", children: [
    /* @__PURE__ */ c("h3", { className: "font-bold my-3 pt-3 text-base text-invertBlackWhite pr-3 sticky top-0 bg-chatInput z-10 -mx-3 px-3", children: n.title }),
    /* @__PURE__ */ x("div", { className: "flex flex-wrap justify-between", children: [
      e.map((i) => /* @__PURE__ */ c(
        C,
        {
          emoji: i,
          onPick: o
        },
        `${n.id}-${i}`
      )),
      /* @__PURE__ */ c("div", { className: "flex-1" })
    ] })
  ] });
});
T.displayName = "EmojiCategorySection";
const R = ({
  onPick: n
}) => {
  const [o, s] = S($[0].id), e = h(null), i = h({}), d = h(!1), u = z((t) => t.input.showEmoji), b = B(() => w, []), I = g(
    (t) => (r) => {
      i.current[t] = r;
    },
    []
  ), k = g((t) => {
    var a;
    const r = i.current[t];
    if (!r)
      return;
    d.current = !0, s(t), r.scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
    const m = setTimeout(() => {
      d.current = !1;
    }, 700);
    if ("onscrollend" in window) {
      const f = () => {
        var l;
        clearTimeout(m), d.current = !1, (l = e.current) == null || l.removeEventListener("scrollend", f);
      };
      (a = e.current) == null || a.addEventListener("scrollend", f);
    }
  }, []), v = g(() => {
    if (d.current)
      return;
    const t = e.current;
    if (!t)
      return;
    const r = t.getBoundingClientRect().top, m = 10;
    let a = null, f = 1 / 0;
    for (const l of b) {
      const p = i.current[l.id];
      if (!p)
        continue;
      const y = p.getBoundingClientRect(), N = Math.abs(y.top - r - m);
      y.top <= r + m + 60 && N < f && (f = N, a = l.id);
    }
    if (!a)
      for (const l of b) {
        const p = i.current[l.id];
        if (!p)
          continue;
        if (p.getBoundingClientRect().bottom > r + m) {
          a = l.id;
          break;
        }
      }
    a && a !== o && s(a);
  }, [o, b]), j = h(
    _(() => {
      v();
    }, 100)
  ).current;
  return L(() => {
    const t = e.current;
    if (!t)
      return;
    const r = () => j();
    return t.addEventListener("scroll", r, { passive: !0 }), setTimeout(() => v(), 100), () => {
      t.removeEventListener("scroll", r);
    };
  }, [j, v]), /* @__PURE__ */ c("div", { className: "order-3", children: /* @__PURE__ */ x(
    "div",
    {
      className: `
          overflow-hidden   bg-chatInput shadow-lg   border-gray-200
          transition-all duration-300 ease-out
          ${u ? "max-h-[260px] opacity-100" : "max-h-0 opacity-0"}
        `,
      children: [
        /* @__PURE__ */ c("div", { className: "sticky top-0 z-20 bg-bgInput/95 backdrop-blur-sm border-b border-gray-200", children: /* @__PURE__ */ c(
          O,
          {
            activeTab: o,
            scrollToCategory: k
          }
        ) }),
        /* @__PURE__ */ c(
          "div",
          {
            ref: e,
            className: "max-h-52 overflow-y-auto scroll-container scrollbar-thumb-gray-400 p-1 pt-0",
            children: b.map((t, r) => {
              if (r < 1 || u)
                return /* @__PURE__ */ c(
                  T,
                  {
                    cat: t,
                    onPick: n,
                    sectionRef: I(t.id)
                  },
                  t.id
                );
            })
          }
        )
      ]
    }
  ) });
};
R.displayName = "EmojisTabView";
const U = E(R);
export {
  U as default
};
