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