import { s, k as u, Z as L, _ as O, $ as R, G as B, a0 as P, W as Q, d as U, a as V, e as F, N as k, u as W, b as G, Y, h as _ } from "./provider.js";
import { jsxs as c, jsx as e } from "react/jsx-runtime";
import { useState as y, useCallback as K, useMemo as E, useEffect as x } from "react";
import { j as m, Q as A, k as Z, S as H } from "./useStreamLayerApp2.js";
const $ = /* @__PURE__ */ s("div")({
  name: "Media",
  class: "m1bcvojl",
  propsAsIs: !1
}), J = () => $, X = /* @__PURE__ */ s(J())({
  name: "MediaImgBottom",
  class: "m58gin0",
  propsAsIs: !0
}), ee = () => $, N = /* @__PURE__ */ s(ee())({
  name: "MediaImgSolid",
  class: "m1atm8do",
  propsAsIs: !0
}), se = () => $, ne = /* @__PURE__ */ s(se())({
  name: "MediaImgRounded",
  class: "myx3xoi",
  propsAsIs: !0
}), te = () => $, ie = /* @__PURE__ */ s(te())({
  name: "MediaImgCentered",
  class: "m1bwv0gx",
  propsAsIs: !0
}), oe = () => $, ae = /* @__PURE__ */ s(oe())({
  name: "MediaImgInsight",
  class: "mntjanp",
  propsAsIs: !0
}), ce = /* @__PURE__ */ s("div")({
  name: "VideoIcon",
  class: "v1kofb47",
  propsAsIs: !1
}), re = {
  [m.UNSET]: N,
  [m.NONE]: N,
  [m.ROUNDED]: ne,
  [m.CENTERED]: ie,
  [m.TRANSPARENT]: X
}, b = ({
  src: t,
  imageMode: i = m.UNSET,
  withVideo: o,
  fromInsight: a
}) => {
  if (i === m.NONE)
    return null;
  const n = a ? ae : re[i];
  return /* @__PURE__ */ c(n, {
    children: [/* @__PURE__ */ e("img", {
      src: t,
      alt: ""
    }), o && /* @__PURE__ */ e(ce, {
      children: /* @__PURE__ */ e(u, {
        name: "icon-play"
      })
    })]
  });
}, le = /* @__PURE__ */ s("div")({
  name: "NotificationContent",
  class: "nuraq9m",
  propsAsIs: !1
}), de = /* @__PURE__ */ s("div")({
  name: "NotificationContainer",
  class: "ns1nzpg",
  propsAsIs: !1
}), M = /* @__PURE__ */ s("div")({
  name: "Body",
  class: "b1j59nzs",
  propsAsIs: !1
}), pe = /* @__PURE__ */ s("div")({
  name: "Title",
  class: "t9vmnpp",
  propsAsIs: !1
}), me = /* @__PURE__ */ s("button")({
  name: "Button",
  class: "b14ivj5k",
  propsAsIs: !1
}), ue = () => u, Ie = /* @__PURE__ */ s(ue())({
  name: "StyledChevronRight",
  class: "s1atci8n",
  propsAsIs: !0
}), ve = /* @__PURE__ */ s("div")({
  name: "QuoteWrap",
  class: "q4w8jgs",
  propsAsIs: !1
}), he = /* @__PURE__ */ s("blockquote")({
  name: "Quote",
  class: "qaa0kez",
  propsAsIs: !1
}), Ae = /* @__PURE__ */ s("div")({
  name: "Body",
  class: "b1wvd52w",
  propsAsIs: !1
}), $e = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "ccvukea",
  propsAsIs: !1
}), ye = ({ image: t, tweet: i, account: o, accountVerified: a, body: n, title: d }) => {
  var l;
  return /* @__PURE__ */ c($e, { children: [
    d && /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ e(he, { children: d }) }),
    /* @__PURE__ */ e(
      L,
      {
        image: t,
        name: (l = i == null ? void 0 : i.meta) == null ? void 0 : l.accountName,
        userName: o,
        verified: a,
        createdTweet: i == null ? void 0 : i.date
      }
    ),
    /* @__PURE__ */ e(Ae, { children: O(n) })
  ] });
}, fe = ({ title: t, questionType: i, questionTypeData: o }) => /* @__PURE__ */ c(M, { children: [
  /* @__PURE__ */ e(
    R,
    {
      questionTypeData: o,
      questionType: i,
      questionStatus: Z.UNSET
    }
  ),
  t && /* @__PURE__ */ e(pe, { children: t })
] }), ge = ({ tweet: t }) => t ? /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(ye, { ...t, controlVideo: () => {
} }) }) : null, Te = ({ action: t, questionType: i, inApp: o, insight: a, tweet: n }) => {
  var d;
  const l = B[i], r = P[i];
  if (!l || !o || !o.notification)
    return null;
  const { title: p, image: I, imageMode: v } = o.notification;
  let h = I;
  i === A.TWEET && n != null && n.tweetMedia && (h = n.tweetMedia.image), v === m.NONE && (h = "");
  const f = o.useMediaFromContent && (a == null ? void 0 : a.image), T = i === A.TWEET && ((d = n == null ? void 0 : n.tweetMedia) == null ? void 0 : d.video) || i === A.FACTOID && (a == null ? void 0 : a.video);
  return /* @__PURE__ */ e(de, { "data-a": "intr", className: "SL_InApp", onClick: t, children: /* @__PURE__ */ c(le, { style: h ? {} : { paddingLeft: "1.5rem" }, children: [
    h && !f && /* @__PURE__ */ e(b, { src: h, imageMode: v, withVideo: !!T }),
    f && /* @__PURE__ */ e(b, { src: f, fromInsight: !0, withVideo: !!T }),
    i === A.TWEET ? /* @__PURE__ */ e(ge, { tweet: n }) : /* @__PURE__ */ e(fe, { questionTypeData: l, questionType: i, title: p }),
    /* @__PURE__ */ e(me, { name: "inapp-button", children: r || "Open" }),
    /* @__PURE__ */ e(Ie, { name: "chevronRight" })
  ] }) });
}, ke = /* @__PURE__ */ s("div")({
  name: "NotificationContainer",
  class: "n11jcrxe",
  propsAsIs: !1
}), C = /* @__PURE__ */ s("img")({
  name: "Icon",
  class: "i1vmpt6u",
  propsAsIs: !1
}), Ne = /* @__PURE__ */ s("div")({
  name: "IconContainer",
  class: "i180665s",
  propsAsIs: !1
}), be = () => u, Ce = /* @__PURE__ */ s(be())({
  name: "TitleIcon",
  class: "t16zzzei",
  propsAsIs: !0
}), we = () => Q, qe = /* @__PURE__ */ s(we())({
  name: "Close",
  class: "c1sur0q2",
  propsAsIs: !0
}), Se = /* @__PURE__ */ s("div")({
  name: "Body",
  class: "bai9j52",
  propsAsIs: !1
}), Ee = /* @__PURE__ */ s("div")({
  name: "Title",
  class: "t1bnt25p",
  propsAsIs: !1
}), xe = /* @__PURE__ */ s("div")({
  name: "Description",
  class: "dmixjec",
  propsAsIs: !1
}), Me = /* @__PURE__ */ s("button")({
  name: "Button",
  class: "b1ubkw1q",
  propsAsIs: !1
}), je = ({
  open: t,
  close: i,
  ...o
}) => {
  var a, n;
  return /* @__PURE__ */ c(
    ke,
    {
      "data-a": "intr",
      onClick: () => {
        t == null || t(), o && (o.instantOpen = !0);
      },
      children: [
        /* @__PURE__ */ c(Ne, { children: [
          /* @__PURE__ */ e(C, { className: "on-light", src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification.png" }),
          /* @__PURE__ */ e(
            C,
            {
              className: "on-dark",
              src: "https://cdn.streamlayer.io/assets/sdk-web/onboarding-steps/notification-dark.png"
            }
          )
        ] }),
        /* @__PURE__ */ c(Se, { children: [
          /* @__PURE__ */ c(Ee, { children: [
            /* @__PURE__ */ e(Ce, { name: "icon-trophy-solid" }),
            (a = o == null ? void 0 : o.titleCard) == null ? void 0 : a.title
          ] }),
          /* @__PURE__ */ c(xe, { children: [
            /* @__PURE__ */ e("span", { children: (n = o == null ? void 0 : o.titleCard) == null ? void 0 : n.subtitle }),
            /* @__PURE__ */ e(Me, { name: "inapp-button", children: "Play Now" })
          ] })
        ] }),
        /* @__PURE__ */ e(
          qe,
          {
            close: (d) => {
              d == null || d.stopPropagation(), i == null || i();
            }
          }
        )
      ]
    }
  );
}, ze = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "cef8huz",
  propsAsIs: !1
}), De = () => u, Le = /* @__PURE__ */ s(De())({
  name: "CheckIcon",
  class: "c1mo15kk",
  propsAsIs: !0
}), Oe = () => u, Re = /* @__PURE__ */ s(Oe())({
  name: "PredictionIcon",
  class: "p16zkqnm",
  propsAsIs: !0
}), Be = /* @__PURE__ */ s("div")({
  name: "PredictionIconContainer",
  class: "pjszi7a",
  propsAsIs: !1
}), Pe = /* @__PURE__ */ s("div")({
  name: "BodyContainer",
  class: "bftbmo3",
  propsAsIs: !1
}), Qe = /* @__PURE__ */ s("div")({
  name: "Body",
  class: "barrbyu",
  propsAsIs: !1
}), Ue = /* @__PURE__ */ s("div")({
  name: "Subtitle",
  class: "sz7237i",
  propsAsIs: !1
}), Ve = ({
  step: t,
  children: i,
  answer: o,
  state: a = "pending"
}) => {
  const [n, d] = y(0), [l] = y(() => new ResizeObserver((p) => {
    window.requestAnimationFrame(() => {
      var I, v;
      d((v = (I = p == null ? void 0 : p[0]) == null ? void 0 : I.contentRect) == null ? void 0 : v.width);
    });
  })), r = K((p) => {
    p || l.disconnect(), l.observe(p);
  }, [l]);
  return E(() => () => {
    l.disconnect();
  }, [l]), /* @__PURE__ */ c(ze, {
    children: [/* @__PURE__ */ e(Be, {
      children: /* @__PURE__ */ e(Re, {
        name: "icon-prediction"
      })
    }), /* @__PURE__ */ e(Pe, {
      style: {
        minWidth: `${n}px`
      },
      children: /* @__PURE__ */ e(Qe, {
        children: i
      }, t)
    }), /* @__PURE__ */ e(Ue, {
      ref: r,
      className: a,
      children: /* @__PURE__ */ c("div", {
        children: [/* @__PURE__ */ e(Le, {
          name: "icon-check"
        }), "Your Pick: ", o]
      })
    })]
  });
}, Fe = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "ckyzolp",
  propsAsIs: !1
}), g = /* @__PURE__ */ s("div")({
  name: "Line",
  class: "l16t1zr7",
  propsAsIs: !1
}), We = () => g, Ge = /* @__PURE__ */ s(We())({
  name: "Line1",
  class: "le78kvg",
  propsAsIs: !0
}), Ye = () => g, _e = /* @__PURE__ */ s(Ye())({
  name: "Line2",
  class: "l1o7966d",
  propsAsIs: !0
}), Ke = () => g, Ze = /* @__PURE__ */ s(Ke())({
  name: "Line3",
  class: "lu9lyxq",
  propsAsIs: !0
}), He = () => /* @__PURE__ */ c(Fe, {
  children: [/* @__PURE__ */ e(Ge, {
    children: /* @__PURE__ */ e("div", {})
  }), /* @__PURE__ */ e(_e, {
    children: /* @__PURE__ */ e("div", {})
  }), /* @__PURE__ */ e(Ze, {
    children: /* @__PURE__ */ e("div", {})
  })]
}), Je = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "c10jy6zf",
  propsAsIs: !1
}), Xe = () => u, es = /* @__PURE__ */ s(Xe())({
  name: "CheckIcon",
  class: "c1c7scay",
  propsAsIs: !0
}), ss = () => /* @__PURE__ */ c(Je, {
  children: [/* @__PURE__ */ e(es, {
    name: "icon-check"
  }), " Prediction results are in!"]
}), ns = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "cf6k2yy",
  propsAsIs: !1
}), ts = /* @__PURE__ */ s("div")({
  name: "Caption",
  class: "c1c8xjus",
  propsAsIs: !1
}), is = /* @__PURE__ */ s("div")({
  name: "Title",
  class: "t1d1uekn",
  propsAsIs: !1
}), os = ({
  title: t
}) => /* @__PURE__ */ c(ns, {
  children: [/* @__PURE__ */ e(ts, {
    children: "Results for"
  }), /* @__PURE__ */ e(is, {
    children: t
  })]
}), j = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "c181a1as",
  propsAsIs: !1
}), z = /* @__PURE__ */ s("div")({
  name: "Title",
  class: "t1cduox6",
  propsAsIs: !1
}), as = () => u, D = /* @__PURE__ */ s(as())({
  name: "CorrectIcon",
  class: "c1onrv6j",
  propsAsIs: !0
}), cs = () => D, rs = /* @__PURE__ */ s(cs())({
  name: "InCorrectIcon",
  class: "i17n9o7e",
  propsAsIs: !0
}), ls = () => /* @__PURE__ */ c(j, {
  children: [/* @__PURE__ */ c(z, {
    children: ["Congratulations!", /* @__PURE__ */ e("br", {}), "You answered correctly."]
  }), /* @__PURE__ */ e(D, {
    name: "icon-check"
  })]
}), ds = ({
  title: t
}) => /* @__PURE__ */ c(j, {
  children: [/* @__PURE__ */ c(z, {
    children: ["Better luck next time!", /* @__PURE__ */ e("br", {}), "Correct: ", t]
  }), /* @__PURE__ */ e(rs, {
    name: "icon-cross"
  })]
}), ps = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "cnxgcs2",
  propsAsIs: !1
}), ms = /* @__PURE__ */ s("div")({
  name: "Title",
  class: "t903f8n",
  propsAsIs: !1
}), us = () => u, Is = /* @__PURE__ */ s(us())({
  name: "CheckIcon",
  class: "ceyu3qj",
  propsAsIs: !0
}), vs = ({
  points: t
}) => /* @__PURE__ */ c(ps, {
  children: [/* @__PURE__ */ c(ms, {
    children: ["You won ", /* @__PURE__ */ e(U, {
      delay: 0.5,
      prefix: "+",
      suffix: " points",
      value: t
    })]
  }), /* @__PURE__ */ e(Is, {
    name: "icon-trophy-solid"
  })]
}), w = /* @__PURE__ */ s("div")({
  name: "Container",
  class: "cq3agu2",
  propsAsIs: !1
}), q = /* @__PURE__ */ s("div")({
  name: "Body",
  class: "b16qj0do",
  propsAsIs: !1
}), S = {
  1: 3e3,
  2: 4e3,
  3: 4e3,
  4: 4e3
}, hs = ({ close: t, action: i, setStep: o, votedAnswer: a, correct: n, correctAnswerTitle: d, questionTitle: l, step: r }) => {
  if (x(() => {
    if (o) {
      const I = setTimeout(() => {
        S[r + 1] && (n || r < 3) ? o(r + 1) : t == null || t();
      }, S[r]);
      return () => {
        I && clearTimeout(I);
      };
    }
    return () => {
    };
  }, [o, r, t, n]), r === 1)
    return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(ss, {}) }) });
  let p = "pending";
  return (r === 3 || r === 4) && (p = n ? "correct" : "incorrect"), /* @__PURE__ */ e(w, { "data-a": "intr", onClick: () => i == null ? void 0 : i(), children: /* @__PURE__ */ c(q, { children: [
    r !== 1 && /* @__PURE__ */ e(He, {}, r),
    /* @__PURE__ */ c(Ve, { state: p, step: r, answer: (a == null ? void 0 : a.title) || "unknown", children: [
      r === 2 && /* @__PURE__ */ e(os, { title: l || "unknown" }),
      r === 3 && n && /* @__PURE__ */ e(ls, {}),
      r === 3 && !n && /* @__PURE__ */ e(ds, { title: d || "unknown" }),
      r === 4 && /* @__PURE__ */ e(vs, { points: (a == null ? void 0 : a.points) || 0 })
    ] })
  ] }) });
}, As = ({ close: t, action: i, votedAnswer: o, correct: a, correctAnswerTitle: n, questionTitle: d }) => {
  const [l, r] = y(1);
  return /* @__PURE__ */ e(
    hs,
    {
      close: t,
      action: i,
      votedAnswer: o,
      correct: a,
      correctAnswerTitle: n,
      questionTitle: d,
      setStep: r,
      step: l,
      title: ""
    }
  );
}, $s = /* @__PURE__ */ s("div")({
  name: "NotificationContainer",
  class: "n1i4h28u",
  propsAsIs: !1
}), ys = (t) => /* @__PURE__ */ e($s, { children: /* @__PURE__ */ e(As, { ...t }) }), fs = ({ sdk: t }) => {
  const [i] = y(t.getNotificationsStore()), o = V(i), a = t.getFeature(H.GAMES), n = E(() => t.getActiveNotification(), [t, o]);
  return x(() => {
    n && F.emit("notification", {
      action: "rendered",
      payload: {
        questionId: n.data.questionId,
        questionType: n.data.questionType
      }
    });
  }, [n]), n && n.type === k.QUESTION_RESOLVED ? n.data.question && n.data.questionType === A.PREDICTION ? /* @__PURE__ */ e(
    ys,
    {
      action: n.action,
      close: n.close,
      ...n.data.question
    }
  ) : null : n && n.type === k.ONBOARDING ? n.data.onboarding ? /* @__PURE__ */ e(je, { open: a == null ? void 0 : a.openFeature, close: n.close, ...n.data.onboarding }) : null : n && /* @__PURE__ */ e(Te, { ...n.data, action: n.action });
}, bs = ({ theme: t }) => {
  const i = W(), o = G(), a = Y();
  return i && (a.appNotification || a.onboardingNotification) ? a.app && !a.onboardingNotification ? null : /* @__PURE__ */ e("div", { className: "StreamLayerSDK", children: /* @__PURE__ */ e(_, { customTheme: t ?? o.theme, themeMode: o.themeMode, children: /* @__PURE__ */ e(fs, { sdk: i }) }) }) : null;
};
export {
  bs as StreamLayerSDKNotification,
  fs as StreamLayerSDKNotificationUI
};
