import { s as n, B as A, $ as As, a0 as hs, a1 as W, G as _, a2 as Is, Y as $s, V as E, X as gs, d as ws, a as ys, e as Ts, N as M, u as bs, b as Cs, _ as fs, h as ks } from "./provider.js";
import { jsxs as l, jsx as s } from "react/jsx-runtime";
import { useState as w, useRef as G, useEffect as y, useCallback as Ns, useMemo as qs } from "react";
import { l as v, Q as I, m as K, r as L, S as Ls, A as R } from "./useStreamLayerApp2.js";
const b = /* @__PURE__ */ n("div")({
  name: "Media",
  class: "m1bcvojl",
  propsAsIs: !1
}), Ss = () => b, Es = /* @__PURE__ */ n(Ss())({
  name: "MediaImgBottom",
  class: "m58gin0",
  propsAsIs: !0
}), xs = () => b, q = /* @__PURE__ */ n(xs())({
  name: "MediaImgSolid",
  class: "m1atm8do",
  propsAsIs: !0
}), Ds = () => b, Ms = /* @__PURE__ */ n(Ds())({
  name: "MediaImgRounded",
  class: "myx3xoi",
  propsAsIs: !0
}), Rs = () => b, Os = /* @__PURE__ */ n(Rs())({
  name: "MediaImgCentered",
  class: "m1bwv0gx",
  propsAsIs: !0
}), Bs = () => b, js = /* @__PURE__ */ n(Bs())({
  name: "MediaImgInsight",
  class: "mntjanp",
  propsAsIs: !0
}), Ps = /* @__PURE__ */ n("div")({
  name: "VideoIcon",
  class: "v1kofb47",
  propsAsIs: !1
}), Us = {
  [v.UNSET]: q,
  [v.NONE]: q,
  [v.ROUNDED]: Ms,
  [v.CENTERED]: Os,
  [v.TRANSPARENT]: Es,
  [v.SOLID]: q
}, O = ({
  src: e,
  imageMode: i = v.UNSET,
  withVideo: t,
  fromInsight: o
}) => {
  if (i === v.NONE)
    return null;
  const a = o ? js : Us[i];
  return /* @__PURE__ */ l(a, {
    children: [/* @__PURE__ */ s("img", {
      src: e,
      alt: ""
    }), t && /* @__PURE__ */ s(Ps, {
      children: /* @__PURE__ */ s(A, {
        name: "icon-play"
      })
    })]
  });
}, zs = /* @__PURE__ */ n("div")({
  name: "NotificationContent",
  class: "nuraq9m",
  propsAsIs: !1
}), Vs = /* @__PURE__ */ n("div")({
  name: "NotificationContainer",
  class: "ns1nzpg",
  propsAsIs: !1
}), X = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "b1j59nzs",
  propsAsIs: !1
}), Fs = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t9vmnpp",
  propsAsIs: !1
}), Qs = /* @__PURE__ */ n("button")({
  name: "Button",
  class: "b14ivj5k",
  propsAsIs: !1
}), Ys = () => A, Ws = /* @__PURE__ */ n(Ys())({
  name: "StyledChevronRight",
  class: "s1atci8n",
  propsAsIs: !0
}), _s = /* @__PURE__ */ n("div")({
  name: "QuoteWrap",
  class: "q4w8jgs",
  propsAsIs: !1
}), Gs = /* @__PURE__ */ n("blockquote")({
  name: "Quote",
  class: "qaa0kez",
  propsAsIs: !1
}), Ks = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "b1wvd52w",
  propsAsIs: !1
}), Xs = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "ccvukea",
  propsAsIs: !1
}), Hs = ({ image: e, tweet: i, account: t, accountVerified: o, body: a, title: p }) => {
  var d;
  return /* @__PURE__ */ l(Xs, { children: [
    p && /* @__PURE__ */ s(_s, { children: /* @__PURE__ */ s(Gs, { children: p }) }),
    /* @__PURE__ */ s(
      As,
      {
        image: e,
        name: (d = i == null ? void 0 : i.meta) == null ? void 0 : d.accountName,
        userName: t,
        verified: o,
        createdTweet: i == null ? void 0 : i.date
      }
    ),
    /* @__PURE__ */ s(Ks, { children: hs(a) })
  ] });
}, Js = ({ title: e, questionType: i, questionTypeData: t }) => /* @__PURE__ */ l(X, { children: [
  /* @__PURE__ */ s(
    W,
    {
      questionTypeData: t,
      questionType: i,
      questionStatus: K.UNSET
    }
  ),
  e && /* @__PURE__ */ s(Fs, { children: e })
] }), Zs = ({ tweet: e }) => e ? /* @__PURE__ */ s(X, { children: /* @__PURE__ */ s(Hs, { ...e, controlVideo: () => {
} }) }) : null, se = ({ action: e, questionType: i, inApp: t, insight: o, tweet: a }) => {
  var p;
  const d = _[i], r = Is[i];
  if (!d || !t || !t.notification)
    return null;
  const { title: m, image: u, imageMode: $ } = t.notification;
  let h = u;
  i === I.TWEET && a != null && a.tweetMedia && (h = a.tweetMedia.image), $ === v.NONE && (h = "");
  const g = t.useMediaFromContent && (o == null ? void 0 : o.image), c = i === I.TWEET && ((p = a == null ? void 0 : a.tweetMedia) == null ? void 0 : p.video) || i === I.FACTOID && (o == null ? void 0 : o.video);
  return /* @__PURE__ */ s(Vs, { "data-a": "intr", className: "SL_InApp", onClick: e, children: /* @__PURE__ */ l(zs, { style: h ? {} : { paddingLeft: "1.5rem" }, children: [
    h && !g && /* @__PURE__ */ s(O, { src: h, imageMode: $, withVideo: !!c }),
    g && /* @__PURE__ */ s(O, { src: g, fromInsight: !0, withVideo: !!c }),
    i === I.TWEET ? /* @__PURE__ */ s(Zs, { tweet: a }) : /* @__PURE__ */ s(Js, { questionTypeData: d, questionType: i, title: m }),
    /* @__PURE__ */ s(Qs, { name: "inapp-button", children: r || "Open" }),
    /* @__PURE__ */ s(Ws, { name: "chevronRight" })
  ] }) });
}, ee = () => ({
  color: e
}) => e, B = /* @__PURE__ */ n("div")({
  name: "MediaComponentWrap",
  class: "mek728j",
  propsAsIs: !1,
  vars: {
    "mek728j-0": [ee()]
  }
}), T = /* @__PURE__ */ n("div")({
  name: "Media",
  class: "m461t56",
  propsAsIs: !1
}), ne = () => T, oe = /* @__PURE__ */ n(ne())({
  name: "MediaImgBottom",
  class: "m22bh04",
  propsAsIs: !0
}), ie = () => T, te = /* @__PURE__ */ n(ie())({
  name: "MediaVideo",
  class: "m17u1e34",
  propsAsIs: !0
}), ae = () => T, re = /* @__PURE__ */ n(ae())({
  name: "MediaImgContentMedia",
  class: "m4j3eds",
  propsAsIs: !0
}), ce = () => T, le = /* @__PURE__ */ n(ce())({
  name: "MediaImgSolid",
  class: "m1lp3swr",
  propsAsIs: !0
}), de = () => T, pe = /* @__PURE__ */ n(de())({
  name: "MediaImgRounded",
  class: "mc7lij",
  propsAsIs: !0
}), me = () => T, ue = /* @__PURE__ */ n(me())({
  name: "MediaImgCentered",
  class: "mwwaw7o",
  propsAsIs: !0
}), ve = () => T, S = /* @__PURE__ */ n(ve())({
  name: "MediaNone",
  class: "mqfzyyr",
  propsAsIs: !0
}), Ae = "v170mtgf", he = {
  [v.UNSET]: S,
  [v.NONE]: S,
  [v.ROUNDED]: pe,
  [v.CENTERED]: ue,
  [v.TRANSPARENT]: oe,
  [v.SOLID]: le
}, j = ({
  src: e,
  imageMode: i = v.UNSET,
  withVideo: t,
  color: o,
  useContentMedia: a,
  thumbnailUrl: p
}) => {
  if (!e)
    return /* @__PURE__ */ s(B, {
      color: o,
      children: /* @__PURE__ */ s(S, {})
    });
  const d = a === L.ENABLED ? re : he[i];
  return /* @__PURE__ */ s(B, {
    color: o,
    children: t ? /* @__PURE__ */ s(te, {
      children: /* @__PURE__ */ s($s, {
        className: Ae,
        source: e,
        poster: p || ""
      })
    }) : /* @__PURE__ */ s(d, {
      children: /* @__PURE__ */ s("img", {
        src: e,
        alt: ""
      })
    })
  });
}, Ie = () => ({
  withoutPadding: e
}) => e ? "0px" : "1rem", H = /* @__PURE__ */ n("div")({
  name: "NotificationContent",
  class: "n1p3bk1c",
  propsAsIs: !1,
  vars: {
    "n1p3bk1c-0": [Ie()]
  }
}), $e = /* @__PURE__ */ n("div")({
  name: "MainContent",
  class: "m1g211mu",
  propsAsIs: !1
}), ge = () => A, we = /* @__PURE__ */ n(ge())({
  name: "StyledChevronRight",
  class: "sx1hq4c",
  propsAsIs: !0
}), J = /* @__PURE__ */ n("div")({
  name: "NotificationContainer",
  class: "n1fcriet",
  propsAsIs: !1
}), ye = () => ({
  questionType: e
}) => e === I.FACTOID ? "7.3rem" : "4.5rem", Te = () => ({
  webos: e
}) => e ? "11px 0px 8px 0px" : "11px 0px", be = () => ({
  imageMode: e,
  webos: i
}) => i ? "330px" : e === v.SOLID ? "310px" : e === v.CENTERED || e === v.ROUNDED || e === v.TRANSPARENT ? "370px" : "430px", Ce = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "b1byyovs",
  propsAsIs: !1,
  vars: {
    "b1byyovs-0": [ye()],
    "b1byyovs-1": [Te()],
    "b1byyovs-2": [be()]
  }
}), fe = () => ({
  webos: e
}) => e ? "0.85rem" : "1.033rem", ke = () => ({
  webos: e
}) => e ? "0.95rem" : "1.25rem", Ne = () => ({
  webos: e
}) => e ? "4.7rem" : "2.25rem", qe = () => ({
  webos: e
}) => e ? "pre-wrap" : "nowrap", Le = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t1y5k5id",
  propsAsIs: !1,
  vars: {
    "t1y5k5id-0": [fe()],
    "t1y5k5id-1": [ke()],
    "t1y5k5id-2": [Ne()],
    "t1y5k5id-3": [qe()]
  }
}), Se = /* @__PURE__ */ n("div")({
  name: "Description",
  class: "dw9eb7l",
  propsAsIs: !1
}), Ee = /* @__PURE__ */ n("div")({
  name: "LogoImgContainer",
  class: "ldu8wgy",
  propsAsIs: !1
}), Z = /* @__PURE__ */ n("img")({
  name: "LogoImg",
  class: "ln4a3eh",
  propsAsIs: !1
}), xe = () => J, De = /* @__PURE__ */ n(xe())({
  name: "NotificationInterstitialContainer",
  class: "no2k63v",
  propsAsIs: !0
}), Me = /* @__PURE__ */ n("div")({
  name: "TVButtons",
  class: "th9nn6a",
  propsAsIs: !1
}), ss = /* @__PURE__ */ n("button")({
  name: "TVButton",
  class: "t1eee77p",
  propsAsIs: !1
}), Re = () => ss, Oe = /* @__PURE__ */ n(Re())({
  name: "DismissButton",
  class: "ds000hw",
  propsAsIs: !0
}), Be = () => ss, je = /* @__PURE__ */ n(Be())({
  name: "AnswerButton",
  class: "a1nz9hoe",
  propsAsIs: !0
}), Pe = ({ title: e, questionType: i, questionTypeData: t, description: o, imageMode: a, webos: p }) => /* @__PURE__ */ l(Ce, { imageMode: a, questionType: i, webos: p, children: [
  /* @__PURE__ */ s(
    W,
    {
      questionTypeData: t,
      questionType: i,
      questionStatus: K.UNSET
    }
  ),
  e && /* @__PURE__ */ s(Le, { webos: p, children: e }),
  o && /* @__PURE__ */ s(Se, { children: o })
] }), Ue = E(De), ze = E(Oe), Ve = E(je), Fe = ({
  sponsorLogo: e,
  onClick: i,
  webos: t
}) => /* @__PURE__ */ s(Ue, { autoFocus: !0, webos: t, onClick: i, "data-webos": t, children: /* @__PURE__ */ s(H, { withoutPadding: !0, children: /* @__PURE__ */ s(Z, { src: e }) }) }), Qe = ({
  action: e,
  close: i,
  questionType: t,
  inApp: o,
  insight: a,
  color: p,
  webos: d
}) => {
  var r, m, u;
  const [$, h] = w(!1), g = G();
  y(() => (o != null && o.sponsorLogo && (h(!0), g.current = setTimeout(() => {
    h(!1);
  }, 5e3)), () => clearTimeout(g.current)), [o == null ? void 0 : o.sponsorLogo]);
  const c = _[t];
  if (!c || !o || !o.notification)
    return null;
  const { title: ls, image: ds, imageMode: C, useContentMedia: f } = o.notification, ps = t === I.FACTOID ? a == null ? void 0 : a.heading : ls, ms = t === I.FACTOID ? a == null ? void 0 : a.body : "", us = ds, k = t === I.FACTOID && ((r = a == null ? void 0 : a.video) == null ? void 0 : r.url) && (o == null ? void 0 : o.isVideo) && f === L.ENABLED, N = f === L.ENABLED ? k ? (m = a == null ? void 0 : a.video) == null ? void 0 : m.url : a == null ? void 0 : a.image : "";
  return o != null && o.sponsorLogo && $ ? /* @__PURE__ */ s(
    Fe,
    {
      sponsorLogo: o == null ? void 0 : o.sponsorLogo,
      webos: d,
      onClick: () => h(!1)
    }
  ) : /* @__PURE__ */ l(
    J,
    {
      "data-a": "intr",
      className: "SL_InApp",
      onClick: (vs) => {
        d && (e == null || e(vs));
      },
      "data-is-insight": t === I.FACTOID,
      "data-webos": d,
      children: [
        (o == null ? void 0 : o.sponsorLogo) && /* @__PURE__ */ s(Ee, { children: /* @__PURE__ */ s(Z, { src: o == null ? void 0 : o.sponsorLogo }) }),
        /* @__PURE__ */ l(H, { children: [
          /* @__PURE__ */ l($e, { children: [
            !N && /* @__PURE__ */ s(j, { src: us, imageMode: C, withVideo: !!k, color: p }),
            N && /* @__PURE__ */ s(
              j,
              {
                src: N,
                imageMode: C,
                withVideo: !!k,
                color: p,
                useContentMedia: f,
                thumbnailUrl: (u = a == null ? void 0 : a.video) == null ? void 0 : u.thumbnailUrl
              }
            ),
            /* @__PURE__ */ s(
              Pe,
              {
                questionTypeData: c,
                questionType: t,
                title: ps,
                description: ms,
                imageMode: C,
                webos: d
              }
            )
          ] }),
          !d && /* @__PURE__ */ s(we, { name: "chevronRight" }),
          d && /* @__PURE__ */ l(Me, { children: [
            /* @__PURE__ */ s(ze, { webos: !0, "data-close-btn": "true", onClick: i, children: "Dismiss" }),
            /* @__PURE__ */ s(Ve, { webos: !0, autoFocus: !0, onClick: e, children: "Answer" })
          ] })
        ] })
      ]
    }
  );
}, Ye = /* @__PURE__ */ n("div")({
  name: "NotificationContainer",
  class: "n11jcrxe",
  propsAsIs: !1
}), P = /* @__PURE__ */ n("img")({
  name: "Icon",
  class: "i1vmpt6u",
  propsAsIs: !1
}), We = /* @__PURE__ */ n("div")({
  name: "IconContainer",
  class: "i180665s",
  propsAsIs: !1
}), _e = () => A, Ge = /* @__PURE__ */ n(_e())({
  name: "TitleIcon",
  class: "t16zzzei",
  propsAsIs: !0
}), Ke = () => gs, Xe = /* @__PURE__ */ n(Ke())({
  name: "Close",
  class: "c1sur0q2",
  propsAsIs: !0
}), He = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "bai9j52",
  propsAsIs: !1
}), Je = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t1bnt25p",
  propsAsIs: !1
}), Ze = /* @__PURE__ */ n("div")({
  name: "Description",
  class: "dmixjec",
  propsAsIs: !1
}), sn = /* @__PURE__ */ n("button")({
  name: "Button",
  class: "b1ubkw1q",
  propsAsIs: !1
}), en = ({
  open: e,
  close: i,
  ...t
}) => {
  var o, a;
  return /* @__PURE__ */ l(
    Ye,
    {
      "data-a": "intr",
      onClick: () => {
        e == null || e(), t && t.markIstantOpen();
      },
      children: [
        /* @__PURE__ */ l(We, { children: [
          /* @__PURE__ */ s(P, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
          /* @__PURE__ */ s(
            P,
            {
              className: "on-dark",
              src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
            }
          )
        ] }),
        /* @__PURE__ */ l(He, { children: [
          /* @__PURE__ */ l(Je, { children: [
            /* @__PURE__ */ s(Ge, { name: "icon-trophy-solid" }),
            (o = t == null ? void 0 : t.titleCard) == null ? void 0 : o.title
          ] }),
          /* @__PURE__ */ l(Ze, { children: [
            /* @__PURE__ */ s("span", { children: (a = t == null ? void 0 : t.titleCard) == null ? void 0 : a.subtitle }),
            /* @__PURE__ */ s(sn, { name: "inapp-button", children: "Play Now" })
          ] })
        ] }),
        /* @__PURE__ */ s(
          Xe,
          {
            close: (p) => {
              p == null || p.stopPropagation(), i == null || i();
            }
          }
        )
      ]
    }
  );
}, nn = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cef8huz",
  propsAsIs: !1
}), on = () => A, tn = /* @__PURE__ */ n(on())({
  name: "CheckIcon",
  class: "c1mo15kk",
  propsAsIs: !0
}), an = () => A, rn = /* @__PURE__ */ n(an())({
  name: "PredictionIcon",
  class: "p16zkqnm",
  propsAsIs: !0
}), cn = /* @__PURE__ */ n("div")({
  name: "PredictionIconContainer",
  class: "pjszi7a",
  propsAsIs: !1
}), ln = /* @__PURE__ */ n("div")({
  name: "BodyContainer",
  class: "bftbmo3",
  propsAsIs: !1
}), dn = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "barrbyu",
  propsAsIs: !1
}), pn = /* @__PURE__ */ n("div")({
  name: "Subtitle",
  class: "sz7237i",
  propsAsIs: !1
}), mn = ({
  step: e,
  children: i,
  answer: t,
  state: o = "pending"
}) => {
  const [a, p] = w(0), [d] = w(() => new ResizeObserver((m) => {
    window.requestAnimationFrame(() => {
      var u, $;
      p((($ = (u = m == null ? void 0 : m[0]) == null ? void 0 : u.contentRect) == null ? void 0 : $.width) ?? 0);
    });
  })), r = Ns((m) => {
    m ? d.observe(m) : d.disconnect();
  }, [d]);
  return y(() => () => {
    d.disconnect();
  }, [d]), /* @__PURE__ */ l(nn, {
    children: [/* @__PURE__ */ s(cn, {
      children: /* @__PURE__ */ s(rn, {
        name: "icon-prediction"
      })
    }), /* @__PURE__ */ s(ln, {
      style: {
        minWidth: `${a}px`
      },
      children: /* @__PURE__ */ s(dn, {
        children: i
      }, e)
    }), /* @__PURE__ */ s(pn, {
      ref: r,
      className: o,
      children: /* @__PURE__ */ l("div", {
        children: [/* @__PURE__ */ s(tn, {
          name: "icon-check"
        }), "Your Pick: ", t]
      })
    })]
  });
}, un = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "ckyzolp",
  propsAsIs: !1
}), x = /* @__PURE__ */ n("div")({
  name: "Line",
  class: "l16t1zr7",
  propsAsIs: !1
}), vn = () => x, An = /* @__PURE__ */ n(vn())({
  name: "Line1",
  class: "le78kvg",
  propsAsIs: !0
}), hn = () => x, In = /* @__PURE__ */ n(hn())({
  name: "Line2",
  class: "l1o7966d",
  propsAsIs: !0
}), $n = () => x, gn = /* @__PURE__ */ n($n())({
  name: "Line3",
  class: "lu9lyxq",
  propsAsIs: !0
}), wn = () => /* @__PURE__ */ l(un, {
  children: [/* @__PURE__ */ s(An, {
    children: /* @__PURE__ */ s("div", {})
  }), /* @__PURE__ */ s(In, {
    children: /* @__PURE__ */ s("div", {})
  }), /* @__PURE__ */ s(gn, {
    children: /* @__PURE__ */ s("div", {})
  })]
}), yn = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "c10jy6zf",
  propsAsIs: !1
}), Tn = () => A, bn = /* @__PURE__ */ n(Tn())({
  name: "CheckIcon",
  class: "c1c7scay",
  propsAsIs: !0
}), Cn = () => /* @__PURE__ */ l(yn, {
  children: [/* @__PURE__ */ s(bn, {
    name: "icon-check"
  }), " Prediction results are in!"]
}), fn = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cf6k2yy",
  propsAsIs: !1
}), kn = /* @__PURE__ */ n("div")({
  name: "Caption",
  class: "c1c8xjus",
  propsAsIs: !1
}), Nn = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t1d1uekn",
  propsAsIs: !1
}), qn = ({
  title: e
}) => /* @__PURE__ */ l(fn, {
  children: [/* @__PURE__ */ s(kn, {
    children: "Results for"
  }), /* @__PURE__ */ s(Nn, {
    children: e
  })]
}), es = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "c181a1as",
  propsAsIs: !1
}), ns = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t1cduox6",
  propsAsIs: !1
}), Ln = () => A, os = /* @__PURE__ */ n(Ln())({
  name: "CorrectIcon",
  class: "c1onrv6j",
  propsAsIs: !0
}), Sn = () => os, En = /* @__PURE__ */ n(Sn())({
  name: "InCorrectIcon",
  class: "i17n9o7e",
  propsAsIs: !0
}), xn = () => /* @__PURE__ */ l(es, {
  children: [/* @__PURE__ */ l(ns, {
    children: ["Congratulations!", /* @__PURE__ */ s("br", {}), "You answered correctly."]
  }), /* @__PURE__ */ s(os, {
    name: "icon-check"
  })]
}), Dn = ({
  title: e
}) => /* @__PURE__ */ l(es, {
  children: [/* @__PURE__ */ l(ns, {
    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", e]
  }), /* @__PURE__ */ s(En, {
    name: "icon-cross"
  })]
}), Mn = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cnxgcs2",
  propsAsIs: !1
}), Rn = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "t903f8n",
  propsAsIs: !1
}), On = () => A, Bn = /* @__PURE__ */ n(On())({
  name: "CheckIcon",
  class: "ceyu3qj",
  propsAsIs: !0
}), jn = ({
  points: e
}) => /* @__PURE__ */ l(Mn, {
  children: [/* @__PURE__ */ l(Rn, {
    children: ["You won ", /* @__PURE__ */ s(ws, {
      delay: 0.5,
      prefix: "+",
      suffix: " points",
      value: e
    })]
  }), /* @__PURE__ */ s(Bn, {
    name: "icon-trophy-solid"
  })]
}), U = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cq3agu2",
  propsAsIs: !1
}), z = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "b16qj0do",
  propsAsIs: !1
}), V = {
  1: 3e3,
  2: 4e3,
  3: 4e3,
  4: 4e3
}, Pn = ({ close: e, action: i, setStep: t, votedAnswer: o, correct: a, correctAnswerTitle: p, questionTitle: d, step: r }) => {
  if (y(() => {
    if (t) {
      const u = setTimeout(() => {
        V[r + 1] && (a || r < 3) ? t(r + 1) : e == null || e();
      }, V[r]);
      return () => {
        u && clearTimeout(u);
      };
    }
    return () => {
    };
  }, [t, r, e, a]), r === 1)
    return /* @__PURE__ */ s(U, { children: /* @__PURE__ */ s(z, { children: /* @__PURE__ */ s(Cn, {}) }) });
  let m = "pending";
  return (r === 3 || r === 4) && (m = a ? "correct" : "incorrect"), /* @__PURE__ */ s(U, { "data-a": "intr", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ l(z, { children: [
    r !== 1 && /* @__PURE__ */ s(wn, {}, r),
    /* @__PURE__ */ l(mn, { state: m, step: r, answer: (o == null ? void 0 : o.title) || "unknown", children: [
      r === 2 && /* @__PURE__ */ s(qn, { title: d || "unknown" }),
      r === 3 && a && /* @__PURE__ */ s(xn, {}),
      r === 3 && !a && /* @__PURE__ */ s(Dn, { title: p || "unknown" }),
      r === 4 && /* @__PURE__ */ s(jn, { points: (o == null ? void 0 : o.points) || 0 })
    ] })
  ] }) });
}, Un = ({ close: e, action: i, votedAnswer: t, correct: o, correctAnswerTitle: a, questionTitle: p }) => {
  const [d, r] = w(1);
  return /* @__PURE__ */ s(
    Pn,
    {
      close: e,
      action: i,
      votedAnswer: t,
      correct: o,
      correctAnswerTitle: a,
      questionTitle: p,
      setStep: r,
      step: d,
      title: ""
    }
  );
}, zn = /* @__PURE__ */ n("div")({
  name: "NotificationContainer",
  class: "n1i4h28u",
  propsAsIs: !1
}), Vn = (e) => /* @__PURE__ */ s(zn, { children: /* @__PURE__ */ s(Un, { ...e }) }), Fn = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cwa9tgs",
  propsAsIs: !1
}), Qn = /* @__PURE__ */ n("div")({
  name: "BodyContainer",
  class: "b1xx7swj",
  propsAsIs: !1
}), Yn = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "b1a21en",
  propsAsIs: !1
}), Wn = ({
  step: e,
  children: i,
  state: t = "pending"
}) => {
  const [o, a] = w(0);
  return y(() => {
    const p = new ResizeObserver((d) => {
      window.requestAnimationFrame(() => {
        var r, m;
        const u = ((m = (r = d == null ? void 0 : d[0]) == null ? void 0 : r.contentRect) == null ? void 0 : m.width) ?? 0;
        a(u);
      });
    });
    return () => {
      p.disconnect();
    };
  }, []), /* @__PURE__ */ s(Fn, {
    style: {
      padding: `${e === 3 && t === "incorrect" || e === 1 ? "5px 100px" : "5px 40px"}`
    },
    children: /* @__PURE__ */ s(Qn, {
      style: {
        minWidth: `${o}px`
      },
      children: /* @__PURE__ */ s(Yn, {
        children: i
      }, e)
    })
  });
}, _n = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "c1nd5cu8",
  propsAsIs: !1
}), D = /* @__PURE__ */ n("div")({
  name: "Line",
  class: "lgbipw0",
  propsAsIs: !1
}), Gn = () => D, Kn = /* @__PURE__ */ n(Gn())({
  name: "Line1",
  class: "l1anth16",
  propsAsIs: !0
}), Xn = () => D, Hn = /* @__PURE__ */ n(Xn())({
  name: "Line2",
  class: "l193yd7v",
  propsAsIs: !0
}), Jn = () => D, Zn = /* @__PURE__ */ n(Jn())({
  name: "Line3",
  class: "lhbflsp",
  propsAsIs: !0
}), so = () => /* @__PURE__ */ l(_n, {
  children: [/* @__PURE__ */ s(Kn, {
    children: /* @__PURE__ */ s("div", {})
  }), /* @__PURE__ */ s(Hn, {
    children: /* @__PURE__ */ s("div", {})
  }), /* @__PURE__ */ s(Zn, {
    children: /* @__PURE__ */ s("div", {})
  })]
}), eo = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "c1lvd429",
  propsAsIs: !1
}), no = () => A, oo = /* @__PURE__ */ n(no())({
  name: "PredictionIcon",
  class: "p1n4m87t",
  propsAsIs: !0
}), io = () => /* @__PURE__ */ l(eo, {
  children: [/* @__PURE__ */ s(oo, {
    name: "icon-prediction"
  }), " Prediction results are in!"]
}), to = () => A, ao = /* @__PURE__ */ n(to())({
  name: "CheckIcon",
  class: "c126r8f9",
  propsAsIs: !0
}), ro = /* @__PURE__ */ n("div")({
  name: "Answer",
  class: "a1o2rpgl",
  propsAsIs: !1
}), co = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cej6ci1",
  propsAsIs: !1
}), lo = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "tob24mr",
  propsAsIs: !1
}), po = ({
  title: e,
  answer: i
}) => /* @__PURE__ */ l(co, {
  children: [/* @__PURE__ */ s(lo, {
    children: e
  }), /* @__PURE__ */ l(ro, {
    children: [/* @__PURE__ */ s(ao, {
      name: "icon-prediction"
    }), "Your Pick: ", i]
  })]
}), is = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "c1lesal4",
  propsAsIs: !1
}), ts = /* @__PURE__ */ n("div")({
  name: "Title",
  class: "tv66n4w",
  propsAsIs: !1
}), mo = () => A, uo = /* @__PURE__ */ n(mo())({
  name: "CorrectIcon",
  class: "cx0vlv2",
  propsAsIs: !0
}), as = /* @__PURE__ */ n("div")({
  name: "Answer",
  class: "akfh4v5",
  propsAsIs: !1
}), vo = ({
  answer: e
}) => /* @__PURE__ */ l(is, {
  children: [/* @__PURE__ */ s(ts, {
    children: "Congratulations! You answered correctly."
  }), /* @__PURE__ */ l(as, {
    children: [/* @__PURE__ */ s(uo, {
      name: "icon-correct"
    }), "Your Pick: ", e]
  })]
}), Ao = ({
  title: e,
  answer: i
}) => /* @__PURE__ */ l(is, {
  children: [/* @__PURE__ */ l(ts, {
    children: ["Better luck next time!", /* @__PURE__ */ s("br", {}), "Correct: ", e]
  }), /* @__PURE__ */ l(as, {
    children: ["Your Pick: ", i]
  })]
}), F = /* @__PURE__ */ n("div")({
  name: "Container",
  class: "cmox3ot",
  propsAsIs: !1
}), Q = /* @__PURE__ */ n("div")({
  name: "Body",
  class: "bqq1ix4",
  propsAsIs: !1
}), Y = {
  1: 3e3,
  2: 4e3,
  3: 4e3
}, ho = ({ close: e, action: i, setStep: t, votedAnswer: o, correct: a, correctAnswerTitle: p, questionTitle: d, step: r }) => {
  if (y(() => {
    if (t) {
      const u = setTimeout(() => {
        Y[r + 1] && (a || r < 3) ? t(r + 1) : e == null || e();
      }, Y[r]);
      return () => {
        u && clearTimeout(u);
      };
    }
    return () => {
    };
  }, [t, r, e, a]), r === 1)
    return /* @__PURE__ */ s(F, { children: /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(io, {}) }) });
  let m = "pending";
  return r === 3 && (m = a ? "correct" : "incorrect"), /* @__PURE__ */ s(F, { "data-a": "intr", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ l(Q, { children: [
    r !== 1 && /* @__PURE__ */ s(so, {}, r),
    /* @__PURE__ */ l(Wn, { state: m, step: r, children: [
      r === 2 && /* @__PURE__ */ s(po, { title: d || "unknown", answer: (o == null ? void 0 : o.title) || "unknown" }),
      r === 3 && a && /* @__PURE__ */ s(vo, { answer: (o == null ? void 0 : o.title) || "unknown" }),
      r === 3 && !a && /* @__PURE__ */ s(Ao, { title: p || "unknown", answer: (o == null ? void 0 : o.title) || "unknown" })
    ] })
  ] }) });
}, Io = ({ close: e, action: i, votedAnswer: t, correct: o, correctAnswerTitle: a, questionTitle: p }) => {
  const [d, r] = w(1);
  return /* @__PURE__ */ s(
    ho,
    {
      close: e,
      action: i,
      votedAnswer: t,
      correct: o,
      correctAnswerTitle: a,
      questionTitle: p,
      setStep: r,
      step: d,
      title: ""
    }
  );
}, rs = /* @__PURE__ */ n("div")({
  name: "NotificationContainer",
  class: "nn0nqh6",
  propsAsIs: !1
}), $o = () => ({
  withoutPadding: e
}) => e ? "0px" : "1rem", go = /* @__PURE__ */ n("div")({
  name: "NotificationContent",
  class: "n1bcdf3j",
  propsAsIs: !1,
  vars: {
    "n1bcdf3j-0": [$o()]
  }
}), cs = /* @__PURE__ */ n("img")({
  name: "LogoImg",
  class: "l8jorbq",
  propsAsIs: !1
}), wo = () => rs, yo = /* @__PURE__ */ n(wo())({
  name: "NotificationInterstitialContainer",
  class: "nf920y3",
  propsAsIs: !0
}), To = /* @__PURE__ */ n("div")({
  name: "LogoImgContainer",
  class: "lzsmehn",
  propsAsIs: !1
}), bo = ({ sponsorLogo: e, onClick: i }) => /* @__PURE__ */ s(yo, { onClick: i, children: /* @__PURE__ */ s(go, { withoutPadding: !0, children: /* @__PURE__ */ s(cs, { src: e }) }) }), Co = (e) => {
  var i, t, o, a, p;
  const [d, r] = w(!1), m = G();
  return y(() => {
    var u;
    return (u = e == null ? void 0 : e.inApp) != null && u.sponsorLogo && (r(!0), m.current = setTimeout(() => {
      r(!1);
    }, 5e3)), () => clearTimeout(m.current);
  }, [(i = e == null ? void 0 : e.inApp) == null ? void 0 : i.sponsorLogo]), (t = e == null ? void 0 : e.inApp) != null && t.sponsorLogo && d ? /* @__PURE__ */ s(bo, { sponsorLogo: (o = e.inApp) == null ? void 0 : o.sponsorLogo, onClick: () => r(!1) }) : /* @__PURE__ */ s(rs, { children: /* @__PURE__ */ l("div", { children: [
    ((a = e == null ? void 0 : e.inApp) == null ? void 0 : a.sponsorLogo) && /* @__PURE__ */ s(To, { children: /* @__PURE__ */ s(cs, { src: (p = e == null ? void 0 : e.inApp) == null ? void 0 : p.sponsorLogo }) }),
    /* @__PURE__ */ s(Io, { ...e })
  ] }) });
}, fo = ({ sdk: e, webos: i }) => {
  var t, o, a, p, d, r, m, u;
  const [$] = w(e.getNotificationsStore()), h = ys($), g = e.getFeature(Ls.GAMES), c = qs(() => e.getActiveNotification(), [e, h]);
  return y(() => {
    c && Ts.emit("notification", {
      action: "rendered",
      payload: {
        questionId: c.data.questionId,
        questionType: c.data.questionType
      }
    });
  }, [c]), c && c.type === M.QUESTION_RESOLVED ? c.data.question && c.data.questionType === I.PREDICTION ? c && ((t = c.data.inApp) == null ? void 0 : t.adUnit) === R.STANDART ? /* @__PURE__ */ s(
    Co,
    {
      action: c.action,
      close: c.close,
      ...c.data.question,
      inApp: c.data.inApp
    }
  ) : /* @__PURE__ */ s(
    Vn,
    {
      action: c.action,
      close: c.close,
      ...c.data.question
    }
  ) : null : c && c.type === M.ONBOARDING ? c.data.onboarding ? /* @__PURE__ */ s(
    en,
    {
      open: g == null ? void 0 : g.openOnboarding,
      close: c.close,
      ...c.data.onboarding
    }
  ) : null : c && ((o = c.data.inApp) == null ? void 0 : o.adUnit) === R.STANDART ? /* @__PURE__ */ s(
    Qe,
    {
      ...c.data,
      action: c.action,
      close: c.close,
      color: ((d = (p = (a = c == null ? void 0 : c.data) == null ? void 0 : a.inApp) == null ? void 0 : p.notification) == null ? void 0 : d.indicatorColor) || ((u = (m = (r = c == null ? void 0 : c.data) == null ? void 0 : r.inApp) == null ? void 0 : m.appearance) == null ? void 0 : u.primaryColor),
      webos: i
    }
  ) : c && /* @__PURE__ */ s(se, { ...c.data, action: c.action });
}, So = ({ theme: e }) => {
  const i = bs(), t = Cs(), o = fs();
  return i && (o.appNotification || o.onboardingNotification) ? o.app && !o.onboardingNotification ? null : /* @__PURE__ */ s("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ s(ks, { customTheme: e ?? t.theme, themeMode: t.themeMode, children: /* @__PURE__ */ s(fo, { sdk: i }) }) }) : null;
};
export {
  So as StreamLayerSDKNotification,
  fo as StreamLayerSDKNotificationUI
};
