import { defineComponent, ref, reactive, mergeProps, unref, withCtx, createVNode, resolveDirective, openBlock, createBlock, withDirectives, Fragment, renderList, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderComponent, ssrRenderAttr, ssrGetDirectiveProps, ssrInterpolate, ssrRenderList, ssrRenderClass } from 'vue/server-renderer';
import { e as empty_user } from './empty_user-DSxcM_ac.mjs';
import { f as formatTime } from './useDateTime-iTLoRLEX.mjs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import { i as img_gif } from './post_loading-CMOcYm9B.mjs';
import { q as useElementSize, u as useRouter$1, a as useConfigStore, b as useUserStore } from './server.mjs';
import { B as BasicIconOld } from './BasicIconOld-Booq7UXp.mjs';
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
import { _ as _sfc_main$3 } from './like-D4L8S2C_.mjs';
import { b as _sfc_main$7, a as _sfc_main$5, e as _sfc_main$6 } from './moreOptionProduct-C93aAhOp.mjs';
import { ContentLoader } from 'vue-content-loader';

const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  __name: "Content",
  __ssrInlineRender: true,
  props: {
    media: {},
    name: {},
    id: {},
    scrollSave: {}
  },
  setup(__props) {
    useRouter$1();
    const config = useConfigStore();
    const videos = ref([]);
    const modules = [Pagination];
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_lazy = resolveDirective("lazy");
      let _temp0;
      _push(`<div${ssrRenderAttrs(mergeProps({ class: "mt-.5rem" }, _attrs))} data-v-59d99514>`);
      _push(ssrRenderComponent(unref(Swiper), {
        pagination: true,
        modules,
        class: ["postConfig !m-unset !w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            _push2(`<!--[-->`);
            ssrRenderList(_ctx.media, (slide) => {
              _push2(ssrRenderComponent(unref(SwiperSlide), {
                class: ["!w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
              }, {
                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  if (_push3) {
                    if (slide.type === "video") {
                      _push3(`<div class="video-container" data-v-59d99514${_scopeId2}><video${ssrRenderAttr("src", unref(config).useDataStorage(slide.url))} playsinline muted loop class="video" data-v-59d99514${_scopeId2}></video></div>`);
                    } else {
                      _push3(`<div class="${ssrRenderClass([_ctx.media.length > 1 ? "aspect-square" : "", "w-full flex items-center"])}" data-v-59d99514${_scopeId2}><img${ssrRenderAttrs(_temp0 = mergeProps({
                        alt: unref(config).appName.en,
                        class: "w-full"
                      }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) })))} data-v-59d99514${_scopeId2}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}</div>`);
                    }
                  } else {
                    return [
                      slide.type === "video" ? (openBlock(), createBlock("div", {
                        key: 0,
                        class: "video-container"
                      }, [
                        createVNode("video", {
                          ref_for: true,
                          ref_key: "videos",
                          ref: videos,
                          src: unref(config).useDataStorage(slide.url),
                          playsinline: "",
                          muted: "",
                          loop: "",
                          class: "video"
                        }, null, 8, ["src"])
                      ])) : (openBlock(), createBlock("div", {
                        key: 1,
                        class: ["w-full flex items-center", _ctx.media.length > 1 ? "aspect-square" : ""]
                      }, [
                        withDirectives(createVNode("img", {
                          alt: unref(config).appName.en,
                          class: "w-full"
                        }, null, 8, ["alt"]), [
                          [_directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) }]
                        ])
                      ], 2))
                    ];
                  }
                }),
                _: 2
              }, _parent2, _scopeId));
            });
            _push2(`<!--]-->`);
          } else {
            return [
              (openBlock(true), createBlock(Fragment, null, renderList(_ctx.media, (slide) => {
                return openBlock(), createBlock(unref(SwiperSlide), {
                  class: ["!w-full", _ctx.media.length > 1 ? "!aspect-square !h-unset" : "!h-fit"]
                }, {
                  default: withCtx(() => [
                    slide.type === "video" ? (openBlock(), createBlock("div", {
                      key: 0,
                      class: "video-container"
                    }, [
                      createVNode("video", {
                        ref_for: true,
                        ref_key: "videos",
                        ref: videos,
                        src: unref(config).useDataStorage(slide.url),
                        playsinline: "",
                        muted: "",
                        loop: "",
                        class: "video"
                      }, null, 8, ["src"])
                    ])) : (openBlock(), createBlock("div", {
                      key: 1,
                      class: ["w-full flex items-center", _ctx.media.length > 1 ? "aspect-square" : ""]
                    }, [
                      withDirectives(createVNode("img", {
                        alt: unref(config).appName.en,
                        class: "w-full"
                      }, null, 8, ["alt"]), [
                        [_directive_lazy, { src: unref(config).useDataStorage(slide.url), loading: unref(img_gif), error: unref(img_gif) }]
                      ])
                    ], 2))
                  ]),
                  _: 2
                }, 1032, ["class"]);
              }), 256))
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`<div class="flex bg-[#0195f7] text-white px-3 py-3 items-center justify-between cursor-pointer" data-v-59d99514><div class="font-semibold text-xs" data-v-59d99514>${ssrInterpolate(_ctx.name)}</div><div class="flex items-center" data-v-59d99514><div class="text-xs" data-v-59d99514>${ssrInterpolate(unref(config).useString("viewProduct"))}</div>`);
      _push(ssrRenderComponent(BasicIconOld, {
        icon: unref(config).isRTL ? "vuesax-linear:arrow-left-1" : "vuesax-linear:arrow-right-1",
        size: "16"
      }, null, _parent));
      _push(`</div></div></div>`);
    };
  }
});
const _sfc_setup$2 = _sfc_main$2.setup;
_sfc_main$2.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/home/components/Content.vue");
  return _sfc_setup$2 ? _sfc_setup$2(props, ctx) : void 0;
};
const Content = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-59d99514"]]);
const maxLength = 100;
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "Post",
  __ssrInlineRender: true,
  props: {
    post: {},
    index: {},
    scrollSave: {},
    addLikeLoading: { type: Boolean }
  },
  emits: ["openOption", "openComment", "handleLike", "handleSave"],
  setup(__props, { emit: __emit }) {
    useRouter$1();
    const emits = __emit;
    const config = useConfigStore();
    const expandedPosts = ref({});
    const user = useUserStore();
    const shouldShowMore = (caption) => caption?.length > maxLength;
    function openOption(id) {
      emits("openOption", id);
    }
    const truncatedCaption = (caption) => {
      return shouldShowMore(caption) ? caption?.slice(0, maxLength) + "..." : caption;
    };
    return (_ctx, _push, _parent, _attrs) => {
      const _directive_lazy = resolveDirective("lazy");
      let _temp0;
      _push(`<div${ssrRenderAttrs(mergeProps({
        class: "w-full mb-2",
        id: "post-" + _ctx.post.id
      }, _attrs))}><div class="flex px-3 items-center justify-between"><div class="flex items-center"><img${ssrRenderAttrs(_temp0 = mergeProps({
        alt: "instagram",
        class: "w-2rem h-2rem rounded-full"
      }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(config).useDataStorage(_ctx.post?.users?.avatar), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : _temp0.innerHTML ?? ""}<div class="ms-2"><div class="text-sm font-semibold">${ssrInterpolate(_ctx.post?.users?.username)}</div></div></div>`);
      if (_ctx.post?.users?.id === unref(user).user?.id) {
        _push(`<div>`);
        _push(ssrRenderComponent(BasicIconOld, {
          icon: "vuesax-linear:more",
          class: "rotate-90",
          size: "18",
          onClick: ($event) => openOption(_ctx.post.id)
        }, null, _parent));
        _push(`</div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</div>`);
      _push(ssrRenderComponent(Content, {
        media: _ctx.post?.files,
        name: _ctx.post.title_fa,
        id: _ctx.post.id,
        scrollSave: _ctx.scrollSave
      }, null, _parent));
      _push(`<div class="p-4"><div class="flex gap-4 items-center justify-between"><div class="flex items-center gap-4"><div class="flex items-center gap-1"${ssrRenderAttr("aria-disabled", _ctx.addLikeLoading)}>`);
      _push(ssrRenderComponent(_sfc_main$3, {
        "is-liked": _ctx.post.likes?.some((x) => x.user_id === unref(user).user?.id)
      }, null, _parent));
      _push(` ${ssrInterpolate(_ctx.post?.likes?.length ?? 0)}</div><div class="flex items-center gap-1">`);
      _push(ssrRenderComponent(_sfc_main$7, null, null, _parent));
      _push(` ${ssrInterpolate(_ctx.post?.comments?.length ?? 0)}</div><div class="flex items-center gap-1">`);
      _push(ssrRenderComponent(_sfc_main$5, null, null, _parent));
      _push(`</div></div><div>`);
      _push(ssrRenderComponent(_sfc_main$6, {
        "is-saved": _ctx.post.saved?.some((x) => x.user_id === unref(user).user?.id)
      }, null, _parent));
      _push(`</div></div><div class="mt-2 text-sm"><span class="font-semibold text-sm ms1">${ssrInterpolate(_ctx.post?.users?.username)}</span><span class="ms-2 text-caption whitespace-pre-line">${ssrInterpolate(expandedPosts.value[_ctx.index] ? _ctx.post?.description : truncatedCaption(_ctx.post?.description))}</span>`);
      if (shouldShowMore(_ctx.post?.description)) {
        _push(`<span class="text-gray cursor-pointer ms-1 whitespace-pre-line">${ssrInterpolate(expandedPosts.value[_ctx.index] ? unref(config).useString("less") : unref(config).useString("more"))}</span>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<div class="text-xs mt-1 text-gray-500">${ssrInterpolate(unref(formatTime)(_ctx.post?.created_at))}</div></div></div></div>`);
    };
  }
});
const _sfc_setup$1 = _sfc_main$1.setup;
_sfc_main$1.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/Post.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const Post = Object.assign(_sfc_main$1, { __name: "Post" });
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "PostCardSkeleton",
  __ssrInlineRender: true,
  setup(__props) {
    const isLoaded = ref(false);
    const skeletonRatio = ref(null);
    const skeletonSize = reactive(
      useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: "border-box" })
    );
    return (_ctx, _push, _parent, _attrs) => {
      if (isLoaded.value) {
        _push(`<div${ssrRenderAttrs(mergeProps({
          ref_key: "skeletonRatio",
          ref: skeletonRatio,
          class: "h-fit"
        }, _attrs))}>`);
        _push(ssrRenderComponent(unref(ContentLoader), {
          width: skeletonSize.width,
          height: "800"
        }, {
          default: withCtx((_, _push2, _parent2, _scopeId) => {
            if (_push2) {
              _push2(`<circle${ssrRenderAttr("cx", 30)} cy="30" r="20"${_scopeId}></circle><rect x="60" y="25" rx="3" ry="3" width="100" height="10"${_scopeId}></rect><rect x="0" y="60" rx="0" ry="0"${ssrRenderAttr("width", Math.max(100, skeletonSize.width))}${ssrRenderAttr("height", Math.max(0, skeletonSize.width - 100))}${_scopeId}></rect><rect x="20"${ssrRenderAttr("y", Math.max(0, skeletonSize.width - 10))} rx="0" ry="0"${ssrRenderAttr("width", 300)}${ssrRenderAttr("height", 10)}${_scopeId}></rect><rect x="20"${ssrRenderAttr("y", Math.max(0, skeletonSize.width + 10))} rx="0" ry="0"${ssrRenderAttr("width", 300)}${ssrRenderAttr("height", 8)}${_scopeId}></rect>`);
            } else {
              return [
                createVNode("circle", {
                  cx: 30,
                  cy: "30",
                  r: "20"
                }),
                createVNode("rect", {
                  x: "60",
                  y: "25",
                  rx: "3",
                  ry: "3",
                  width: "100",
                  height: "10"
                }),
                createVNode("rect", {
                  x: "0",
                  y: "60",
                  rx: "0",
                  ry: "0",
                  width: Math.max(100, skeletonSize.width),
                  height: Math.max(0, skeletonSize.width - 100)
                }, null, 8, ["width", "height"]),
                createVNode("rect", {
                  x: "20",
                  y: Math.max(0, skeletonSize.width - 10),
                  rx: "0",
                  ry: "0",
                  width: 300,
                  height: 10
                }, null, 8, ["y"]),
                createVNode("rect", {
                  x: "20",
                  y: Math.max(0, skeletonSize.width + 10),
                  rx: "0",
                  ry: "0",
                  width: 300,
                  height: 8
                }, null, 8, ["y"])
              ];
            }
          }),
          _: 1
        }, _parent));
        _push(`</div>`);
      } else {
        _push(`<!---->`);
      }
    };
  }
});
const _sfc_setup = _sfc_main.setup;
_sfc_main.setup = (props, ctx) => {
  const ssrContext = useSSRContext();
  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("views/base/pages/home/components/PostCardSkeleton.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { Post as P, _sfc_main as _ };