import { jsx as s, jsxs as p, Fragment as $ } from "react/jsx-runtime";
import { A as C, s as t, B as b, f as M, I as D, a as L, b as T, c as E, M as P, u as m, T as R, p as F, k as z, z as B, d as U, l as O, e as j, S as q, m as H, g as V, n as Q, h as K } from "./masters.js";
import { useCallback as W, useRef as _, useState as y, useEffect as f } from "react";
const G = (e, n, a) => {
  const r = n >= C.lg && n < C.xl ? 75 : 52;
  e.current && window.scrollTo({
    top: e.current.offsetTop - r,
    ...a
  });
}, J = /* @__PURE__ */ t("div")({
  name: "Container",
  class: "c115qtkr",
  propsAsIs: !1
}), X = /* @__PURE__ */ t("div")({
  name: "STabs",
  class: "sxnslc8",
  propsAsIs: !1
}), Y = /* @__PURE__ */ t("button")({
  name: "Button",
  class: "b1umzux0",
  propsAsIs: !1
}), Z = /* @__PURE__ */ t("span")({
  name: "Title",
  class: "tspsaas",
  propsAsIs: !1
});
var v = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(v || {});
const S = ({ title: e, active: n, onClick: a }) => /* @__PURE__ */ s(Y, { "data-a": "intr", onClick: a, "data-selected": n, children: /* @__PURE__ */ s(Z, { "data-a": "intr", children: e }) }), ee = ({ activePage: e = "home", toggleActivePage: n }) => /* @__PURE__ */ s(J, { children: /* @__PURE__ */ p(X, { "data-position": e === "home" ? "left" : "right", children: [
  /* @__PURE__ */ s(S, { title: "Home", active: e === "home", onClick: () => n(
    "home"
    /* HOME */
  ) }),
  /* @__PURE__ */ s(
    S,
    {
      title: "Friends",
      active: e === "leaderboard",
      onClick: () => n(
        "leaderboard"
        /* LEADERBOARD */
      )
    }
  )
] }) }), se = /* @__PURE__ */ t("div")({
  name: "Container",
  class: "c1ux29ft",
  propsAsIs: !1
}), ae = () => b, ne = /* @__PURE__ */ t(ae())({
  name: "FriendsIcon",
  class: "f10ncfg2",
  propsAsIs: !0
}), te = /* @__PURE__ */ t("div")({
  name: "Content",
  class: "c1yc07bd",
  propsAsIs: !1
}), re = /* @__PURE__ */ t("div")({
  name: "Title",
  class: "tj6cq7w",
  propsAsIs: !1
}), oe = /* @__PURE__ */ t("div")({
  name: "Description",
  class: "d1ag78xo",
  propsAsIs: !1
}), ie = () => b, ce = /* @__PURE__ */ t(ie())({
  name: "ArrowInviteIcon",
  class: "awohrz6",
  propsAsIs: !0
}), le = ({ title: e, description: n, onClick: a, className: r }) => {
  const [o] = M({
    type: "invitation",
    action: "sent",
    payload: {
      from: D.TITLE_CARD
    }
  });
  return /* @__PURE__ */ p(se, { "data-a": "intr", onClick: o(a), className: r, children: [
    /* @__PURE__ */ s(ne, { name: "icon-friends" }),
    /* @__PURE__ */ p(te, { children: [
      /* @__PURE__ */ s(re, { children: e }),
      /* @__PURE__ */ s(oe, { children: n })
    ] }),
    /* @__PURE__ */ s(ce, { name: "icon-copy" })
  ] });
}, de = /* @__PURE__ */ t("div")({
  name: "Container",
  class: "culdu4a",
  propsAsIs: !1
}), pe = /* @__PURE__ */ t("div")({
  name: "Position",
  class: "pwf8e69",
  propsAsIs: !1
}), me = /* @__PURE__ */ t("img")({
  name: "Avatar",
  class: "atf4yh4",
  propsAsIs: !1
}), ue = /* @__PURE__ */ t("div")({
  name: "AvatarPlaceholder",
  class: "a1dg29ja",
  propsAsIs: !1
}), he = /* @__PURE__ */ t("div")({
  name: "Content",
  class: "c10a68rc",
  propsAsIs: !1
}), ve = /* @__PURE__ */ t("div")({
  name: "NameContainer",
  class: "nc4kck5",
  propsAsIs: !1
}), Ie = /* @__PURE__ */ t("span")({
  name: "Name",
  class: "njsrqgr",
  propsAsIs: !1
}), ge = () => b, fe = /* @__PURE__ */ t(ge())({
  name: "CurrentUserBadge",
  class: "c17uc4zr",
  propsAsIs: !0
}), be = ({
  friendsRank: e,
  avatar: n,
  name: a,
  userId: r,
  points: o,
  isCurrentUser: i,
  style: d
}) => /* @__PURE__ */ p(de, { "data-name": r, style: d, children: [
  /* @__PURE__ */ s(pe, { children: e || 0 }),
  /* @__PURE__ */ p(he, { children: [
    n ? /* @__PURE__ */ s(me, { alt: "leaderboard-item-avatar", src: n }) : /* @__PURE__ */ s(ue, { children: L(a || "") }),
    /* @__PURE__ */ p(ve, { children: [
      /* @__PURE__ */ s(Ie, { children: a || "" }),
      i && /* @__PURE__ */ s(fe, { name: "icon-star" })
    ] })
  ] }),
  /* @__PURE__ */ s("div", { children: T(o) })
] }), Ae = /* @__PURE__ */ t("div")({
  name: "Container",
  class: "c16btbfp",
  propsAsIs: !1
}), ke = ({
  items: e,
  currentUserId: n,
  openItemDetail: a,
  fetchMore: r,
  scrollNode: o,
  hasMore: i
}) => {
  const d = W((c) => {
    const l = c.target.getAttribute("data-name");
    l && a(l);
  }, [a]);
  return /* @__PURE__ */ s(E, {
    loadMore: r,
    initialLoad: !1,
    hasMore: i,
    useWindow: !1,
    getScrollParent: () => o.current,
    children: /* @__PURE__ */ s(Ae, {
      "data-a": "intr",
      onClick: d,
      children: e.map((c) => /* @__PURE__ */ s(be, {
        ...c,
        isCurrentUser: !!n && n === c.userId
      }, c.userId))
    })
  });
}, Ce = /* @__PURE__ */ t("div")({
  name: "InviteFriendsContainer",
  class: "i1c9dygq",
  propsAsIs: !1
}), Se = ({
  deepLink: e
}) => /* @__PURE__ */ s(Ce, {
  children: /* @__PURE__ */ s(P, {
    inviteLink: e,
    inviteCardTitle: "It’s More Fun With Friends",
    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
  })
}), $e = /* @__PURE__ */ t("div")({
  name: "InviteLinkContainer",
  class: "i1odbhm4",
  propsAsIs: !1
}), ye = ({
  gamification: e,
  scrollNode: n,
  scrollStore: a
}) => {
  const r = _(null), {
    data: o,
    hasMore: i,
    loading: d,
    key: c
  } = m(e.leaderboardList.$store), {
    data: l
  } = m(e.deepLink.$store), [u, I] = R(r);
  return !o.length && !d ? /* @__PURE__ */ s(Se, {
    deepLink: l
  }) : /* @__PURE__ */ p($, {
    children: [/* @__PURE__ */ s(ke, {
      items: o,
      scrollNode: n,
      scrollStore: a,
      fetchMore: e.leaderboardList.fetchMore,
      hasMore: i,
      openItemDetail: e.openUser,
      currentUserId: e.currentUserId.get()
    }, c), l && /* @__PURE__ */ s($e, {
      ref: r,
      children: /* @__PURE__ */ s(le, {
        "data-a": "intr",
        onClick: () => u(l),
        title: "Invite Friends",
        description: "Challenge them now!"
      })
    }), I]
  });
}, Ne = ({ store: e, openQuestion: n }) => {
  const { sdk: a } = F(), r = m(e);
  return /* @__PURE__ */ s(z, { openQuestion: n, questions: r.data, controlVideo: a == null ? void 0 : a.controlVideoPlayer });
}, we = ({ userSummary: e }) => {
  var n;
  const [a, r] = y(void 0);
  return f(() => {
    const o = e.$store.subscribe((i) => {
      i && r(i);
    });
    return () => {
      o();
    };
  }, [e]), /* @__PURE__ */ s(B, { loading: !(a != null && a.summary), ...a == null ? void 0 : a.summary, successRate: (n = a == null ? void 0 : a.percentage) == null ? void 0 : n.correct });
}, xe = ({ gamification: e, className: n, scrollStore: a, scrollNode: r, appNode: o, style: i, responsiveStore: d }) => {
  const { tabsShown: c } = m(a, { keys: ["tabsShown"] }), l = m(e.friendsTabEnabled), [u, I] = y(v.HOME), [, N] = U(), { sdkInDesktopView: A, screen: w } = m(d, { keys: ["sdkInDesktopView"] }), x = (h) => {
    N(() => {
      var k;
      I(h), A === !1 && (((k = o.current) == null ? void 0 : k.getBoundingClientRect().y) || 0) < 0 && G(o, w.size, { behavior: "instant" });
    });
  };
  f(() => a.subscribe((h) => {
    if (h.scrollPosition === 0) {
      a.setKey("tabsShown", !0);
      return;
    }
    d.get().sdkInDesktopView ? a.setKey("tabsShown", h.scrollDirection === "backward") : a.setKey("tabsShown", h.scrollDirection === "forward");
  }), [a, d]), f(() => {
    l || I(v.HOME);
  }, [l]);
  let g = "0px";
  return A ? g = c ? "0px" : "calc(0px - var(--header-height))" : g = c ? "var(--header-height)" : "0px", /* @__PURE__ */ p(O, { className: j(n, "SL-Tabs", "sl-hide-on-modal"), style: i, children: [
    l && /* @__PURE__ */ s(
      q,
      {
        style: {
          top: g
        },
        children: /* @__PURE__ */ s(ee, { activePage: u, toggleActivePage: x })
      }
    ),
    u === v.HOME && /* @__PURE__ */ p($, { children: [
      /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(V, { children: /* @__PURE__ */ s(we, { userSummary: e.userSummary }) }) }),
      /* @__PURE__ */ s(Q, { style: { flex: 1 }, children: /* @__PURE__ */ s(Ne, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
    ] }),
    u === v.LEADERBOARD && /* @__PURE__ */ s(K, { children: /* @__PURE__ */ s(ye, { scrollStore: a, scrollNode: r, gamification: e }) })
  ] });
}, Te = ({
  gamification: e,
  scrollStore: n,
  className: a,
  appNode: r,
  scrollNode: o,
  responsiveStore: i
}) => /* @__PURE__ */ s(xe, {
  appNode: r,
  scrollStore: n,
  scrollNode: o,
  className: a,
  gamification: e,
  responsiveStore: i
});
export {
  Te as default
};
