import { useUser as H, useGun as T, useMd as A, computed as z, useColor as U, usePost as F, usePosts as G, openBlock as l, createElementBlock as n, createBaseVNode as t, Fragment as Q, renderList as Y, createBlock as u, unref as e, toDisplayString as m, normalizeStyle as M, createCommentVNode as r, createVNode as N } from "./composables-108ad332.js";
import { PostLine as q, EmbedYoutube as I, UiLink as J, QrShare as K, PostActionUpdate as O, PostList as R } from "./components.js";
const W = { class: "rounded-lg max-w-65ch flex flex-col mx-auto items-stretch justify-center w-full overscroll-contain bg-light-200 dark-bg-dark-500" }, X = { class: "flex flex-wrap" }, Z = /* @__PURE__ */ t("div", { class: "p-0" }, "#", -1), ee = [
  Z
], te = { class: "ml-1 break-all font-bold" }, se = /* @__PURE__ */ t("div", { class: "flex-1" }, null, -1), le = /* @__PURE__ */ t("div", { class: "i-la-angle-left" }, null, -1), oe = [
  le
], ne = /* @__PURE__ */ t("div", { class: "i-la-times" }, null, -1), ie = [
  ne
], re = {
  class: "flex-1 flex flex-col items-stretch",
  style: { flex: "10 1 300px" }
}, ae = {
  key: 0,
  class: "z-1 max-w-100vw"
}, de = ["src"], ce = { class: "flex flex-wrap items-start w-full justify-start" }, ue = { class: "w-full flex flex-col items-stretch" }, he = { class: "p-2" }, me = ["src"], fe = {
  key: 1,
  class: "text-2xl font-bold m-2"
}, xe = {
  key: 3,
  class: "m-2"
}, ke = /* @__PURE__ */ t("div", { class: "flex-auto" }, null, -1), ve = { class: "flex flex-wrap p-4 bg-dark-50 bg-opacity-25 dark-bg-dark-400 w-full items-center gap-1 text-sm" }, pe = {
  key: 0,
  class: "i-la-file-download"
}, ye = {
  key: 1,
  class: "i-la-redo-alt animate-spin"
}, ge = ["innerHTML"], $e = {
  __name: "PostPage",
  props: {
    tag: { type: String, default: "" },
    hash: { type: String, default: "" }
  },
  emits: ["close", "browse", "user"],
  setup(d) {
    const c = d;
    H(), T();
    const V = A();
    z(() => U("light").hex(c.hash));
    const f = z(() => U("deep").hex(c.hash)), { post: s, download: j, downloading: D } = F({ hash: c.hash }), { posts: be, backlinks: E } = G(c.hash);
    return (a, o) => {
      var x, k, v, p, y, g, b, _, w, $, C, P, L, B;
      return l(), n("div", W, [
        t("div", X, [
          (l(!0), n(Q, null, Y(e(E), (i, h) => (l(), u(e(q), {
            key: h,
            style: { flex: "1 1 220px" },
            hash: h,
            tag: d.tag,
            authors: i,
            back: !0,
            onUser: o[0] || (o[0] = (S) => a.$emit("user", S)),
            onClick: (S) => a.$emit("browse", h)
          }, null, 8, ["hash", "tag", "authors", "onClick"]))), 128))
        ]),
        t("div", {
          class: "z-30 flex flex-wrap items-center w-full px-4 py-2 sticky top-0 shadow-xl filter grayscale-70 hover-grayscale-0 transition duration-400ms",
          style: M({ backgroundColor: e(f) })
        }, [
          t("div", {
            class: "hover-underline text-md cursor-pointer font-bold flex",
            onClick: o[1] || (o[1] = (i) => a.$emit("close"))
          }, ee),
          t("div", te, m((x = e(s)) == null ? void 0 : x.title), 1),
          se,
          t("button", {
            class: "p-2",
            onClick: o[2] || (o[2] = (i) => a.$router.back())
          }, oe),
          t("button", {
            class: "p-2",
            onClick: o[3] || (o[3] = (i) => a.$emit("close"))
          }, ie)
        ], 4),
        t("div", re, [
          (k = e(s)) != null && k.cover || (v = e(s)) != null && v.youtube || (p = e(s)) != null && p.text ? (l(), n("div", ae, [
            t("img", {
              class: "sticky top-0",
              src: e(s).cover
            }, null, 8, de),
            (y = e(s)) != null && y.youtube ? (l(), u(e(I), {
              key: 0,
              class: "mb-6 shadow-xl flex-1",
              video: (g = e(s)) == null ? void 0 : g.youtube
            }, null, 8, ["video"])) : r("", !0)
          ])) : r("", !0),
          t("div", ce, [
            t("div", ue, [
              t("div", he, [
                e(s).icon ? (l(), n("img", {
                  key: 0,
                  class: "w-20 h-20 rounded-full m-2",
                  style: M([{ flex: "0 1 40px" }, { borderColor: e(f) }]),
                  src: e(s).icon
                }, null, 12, me)) : r("", !0),
                (b = e(s)) != null && b.title ? (l(), n("div", fe, m((_ = e(s)) == null ? void 0 : _.title), 1)) : r("", !0),
                (w = e(s)) != null && w.link ? (l(), u(e(J), {
                  key: 2,
                  url: ($ = e(s)) == null ? void 0 : $.link
                }, null, 8, ["url"])) : r("", !0),
                (C = e(s)) != null && C.statement ? (l(), n("div", xe, m((P = e(s)) == null ? void 0 : P.statement), 1)) : r("", !0)
              ]),
              ke,
              t("div", ve, [
                N(e(K)),
                N(e(O), { hash: d.hash }, null, 8, ["hash"]),
                t("button", {
                  class: "button flex items-center",
                  onClick: o[4] || (o[4] = (i) => e(j)())
                }, [
                  e(D) ? (l(), n("div", ye)) : (l(), n("div", pe))
                ])
              ])
            ])
          ]),
          (L = e(s)) != null && L.text ? (l(), n("div", {
            key: 1,
            class: "text-md markdown-body bg-light-200 rounded-2xl m-1 px-4 py-4 leading-relaxed max-w-55ch z-10 overflow-scroll max-h-50vh",
            innerHTML: e(V).render((B = e(s)) == null ? void 0 : B.text)
          }, null, 8, ge)) : r("", !0),
          (l(), u(e(R), {
            key: d.tag,
            tag: d.hash,
            header: !1,
            onBrowse: o[5] || (o[5] = (i) => a.$emit("browse", i))
          }, null, 8, ["tag"]))
        ])
      ]);
    };
  }
};
export {
  $e as default
};
//# sourceMappingURL=PostPage-e3f71e56.js.map
