import { b as buildAssetsURL } from '../_/nitro.mjs';
import { defineComponent, ref, computed, watchEffect, watch, nextTick, resolveDirective, mergeProps, unref, withCtx, createVNode, withDirectives, createBlock, openBlock, withModifiers, Fragment, renderList, useSSRContext } from 'vue';
import { ssrRenderAttrs, ssrRenderList, ssrRenderComponent, ssrInterpolate, ssrGetDirectiveProps, ssrRenderAttr } from 'vue/server-renderer';
import { _ as _sfc_main$2 } from './BasicInput-BEP6ZgUl.mjs';
import { u as useRouter, a as useConfigStore, az as useSwipe, b as useUserStore, t as reactiveProjectName, x as getSupabaseStorageUrl, z as useElementSize } from './server.mjs';
import { _ as _sfc_main$3 } from './like-BhIOg3YL.mjs';
import { _ as _export_sfc } from './_plugin-vue_export-helper-1tPrXgE0.mjs';
import { _ as _sfc_main$4 } from './BasicButton-B-4QDu9v.mjs';
import { B as BasicIconOld } from './BasicIconOld-I4c2ShMu.mjs';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCreative } from 'swiper/modules';
import { u as useMediaStore } from './media-kxpEX2xr.mjs';
import { e as empty_user } from './empty_user-BaUNCdgf.mjs';
import { u as userViewStory, s as setStorySeenLocal } from './media-BbtM6xvT.mjs';

const intervalError = "[nuxt] `setInterval` should not be used on the server. Consider wrapping it with an `onNuxtReady`, `onBeforeMount` or `onMounted` lifecycle hook, or ensure you only call it in the browser by checking `false`.";
const setInterval = () => {
  console.error(intervalError);
};
const _imports_0 = "data:image/svg+xml,%3c?xml%20version='1.0'?%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%233797EF'%20viewBox='0%200%2024%2024'%20width='24px'%20height='24px'%3e%3cpath%20d='M12,2C6.477,2,2,6.477,2,12s4.477,10,10,10s10-4.477,10-10S17.523,2,12,2z%20M16,13h-3v3c0,0.552-0.448,1-1,1h0%20c-0.552,0-1-0.448-1-1v-3H8c-0.552,0-1-0.448-1-1v0c0-0.552,0.448-1,1-1h3V8c0-0.552,0.448-1,1-1h0c0.552,0,1,0.448,1,1v3h3%20c0.552,0,1,0.448,1,1v0C17,12.552,16.552,13,16,13z'/%3e%3c/svg%3e";
const _imports_1 = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='none'%20viewBox='0%200%2024%2024'%20id='instagram-highlight-story'%3e%3cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M12.1213%207.40686C10.6607%206.40269%208.64684%206.54986%207.34835%207.84835%205.88388%209.31282%205.88388%2011.6872%207.34835%2013.1517L11.591%2017.3943C11.7316%2017.5349%2011.9224%2017.614%2012.1213%2017.614%2012.3202%2017.614%2012.511%2017.5349%2012.6517%2017.3943L16.8943%2013.1517C18.3588%2011.6872%2018.3588%209.31282%2016.8943%207.84835%2015.5958%206.54986%2013.582%206.40269%2012.1213%207.40686zM11.591%208.90901C10.7123%208.03033%209.28769%208.03033%208.40901%208.90901%207.53033%209.78769%207.53033%2011.2123%208.40901%2012.091L12.1213%2015.8033%2015.8336%2012.091C16.7123%2011.2123%2016.7123%209.78769%2015.8336%208.90901%2014.955%208.03033%2013.5303%208.03033%2012.6517%208.90901%2012.3588%209.2019%2011.8839%209.2019%2011.591%208.90901zM10.2263%202.128C10.3296%202.52914%2010.0881%202.93802%209.68694%203.04127%209.19056%203.16903%208.7103%203.33698%208.24979%203.54149%207.87123%203.7096%207.42806%203.539%207.25994%203.16044%207.09183%202.78187%207.26243%202.3387%207.64099%202.17059%208.17667%201.9327%208.73547%201.73727%209.31306%201.58861%209.7142%201.48537%2010.1231%201.72686%2010.2263%202.128zM5.75633%204.15238C6.03781%204.45625%206.01966%204.93078%205.71579%205.21226%204.97148%205.90172%204.34093%206.71184%203.85525%207.61113%203.65841%207.97559%203.2034%208.11148%202.83894%207.91464%202.47448%207.71781%202.33859%207.26279%202.53543%206.89834%203.1%205.85298%203.83243%204.91218%204.69645%204.11183%205.00032%203.83035%205.47485%203.8485%205.75633%204.15238zM2.25612%209.61903C2.66481%209.6865%202.94142%2010.0725%202.87396%2010.4812%202.79247%2010.9748%202.75%2011.4821%202.75%2011.9999%202.75%2012.5177%202.79247%2013.025%202.87396%2013.5186%202.94142%2013.9273%202.66481%2014.3133%202.25612%2014.3808%201.84744%2014.4482%201.46145%2014.1716%201.39399%2013.7629%201.29922%2013.1888%201.25%2012.5998%201.25%2011.9999%201.25%2011.4%201.29922%2010.811%201.39399%2010.2369%201.46145%209.82819%201.84744%209.55157%202.25612%209.61903zM2.83894%2016.0851C3.2034%2015.8883%203.65841%2016.0242%203.85525%2016.3887%204.34093%2017.288%204.97147%2018.0981%205.71578%2018.7875%206.01966%2019.069%206.03781%2019.5435%205.75633%2019.8474%205.47485%2020.1513%205.00032%2020.1694%204.69644%2019.888%203.83243%2019.0876%203.1%2018.1468%202.53543%2017.1015%202.33859%2016.737%202.47448%2016.282%202.83894%2016.0851zM7.25994%2020.8394C7.42805%2020.4608%207.87122%2020.2902%208.24979%2020.4583%208.7103%2020.6628%209.19056%2020.8308%209.68694%2020.9585%2010.0881%2021.0618%2010.3296%2021.4707%2010.2263%2021.8718%2010.1231%2022.2729%209.7142%2022.5144%209.31306%2022.4112%208.73547%2022.2625%208.17667%2022.0671%207.64099%2021.8292%207.26243%2021.6611%207.09183%2021.2179%207.25994%2020.8394z'%20clip-rule='evenodd'%3e%3c/path%3e%3cpath%20fill='%23fff'%20fill-rule='evenodd'%20d='M11.25%202C11.25%201.58579%2011.5858%201.25%2012%201.25C17.9371%201.25%2022.75%206.06294%2022.75%2012C22.75%2012.4142%2022.4142%2012.75%2022%2012.75C21.5858%2012.75%2021.25%2012.4142%2021.25%2012C21.25%206.89137%2017.1086%202.75%2012%202.75C11.5858%202.75%2011.25%202.41421%2011.25%202ZM21.4682%2015.3127C21.8478%2015.4786%2022.021%2015.9207%2021.8552%2016.3003C20.197%2020.0954%2016.4094%2022.75%2012%2022.75C11.5858%2022.75%2011.25%2022.4142%2011.25%2022C11.25%2021.5858%2011.5858%2021.25%2012%2021.25C15.7919%2021.25%2019.0526%2018.9682%2020.4806%2015.6997C20.6465%2015.3202%2021.0886%2015.1469%2021.4682%2015.3127Z'%20clip-rule='evenodd'%3e%3c/path%3e%3c/svg%3e";
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  __name: "CustomProgressBar",
  __ssrInlineRender: true,
  props: {
    percent: { type: Number, required: true },
    barHeight: { type: Number, default: 2 }
  },
  setup(__props) {
    const el = ref(null);
    const { width } = useElementSize(el);
    const props = __props;
    const containerWidth = ref(0);
    watchEffect(() => {
      if (width.value > 0) {
        containerWidth.value = width.value;
      }
    });
    const key = ref(0);
    const progressWidth = computed(() => containerWidth.value * props.percent / 100);
    watch(progressWidth, () => {
      if (props.percent === 100 || props.percent === 0) {
        key.value++;
      }
    });
    return (_ctx, _push, _parent, _attrs) => {
      _push(`<div${ssrRenderAttrs(mergeProps({
        ref_key: "el",
        ref: el,
        class: "progress-container"
      }, _attrs))} data-v-9bef4aaa>`);
      if (containerWidth.value > 0) {
        _push(`<svg${ssrRenderAttr("width", containerWidth.value)}${ssrRenderAttr("height", __props.barHeight)}${ssrRenderAttr("viewBox", `0 0 ${containerWidth.value} ${__props.barHeight}`)} class="progress-bar" data-v-9bef4aaa><rect x="0" y="0"${ssrRenderAttr("width", containerWidth.value)}${ssrRenderAttr("height", __props.barHeight)} fill="rgba(255, 255, 255, 0.3)" rx="1" ry="1" data-v-9bef4aaa></rect><rect x="0" y="0"${ssrRenderAttr("width", progressWidth.value)}${ssrRenderAttr("height", __props.barHeight)} fill="white" rx="1" ry="1" class="progress-fill" data-v-9bef4aaa></rect></svg>`);
      } else {
        _push(`<!---->`);
      }
      _push(`</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("views/base/pages/home/components/CustomProgressBar.vue");
  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
};
const CustomProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9bef4aaa"]]);
const img_gif = "" + buildAssetsURL("story_loading.Cuvmkir-.gif");
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "FullScreenStories",
  __ssrInlineRender: true,
  props: {
    id: {},
    specifyId: { type: Boolean, default: false }
  },
  emits: ["update:id"],
  setup(__props, { emit: __emit }) {
    useRouter();
    const swiperRef = ref(null);
    const modules = [EffectCreative];
    const indexStory = ref(0);
    const playingSlide = ref(0);
    const storySlides = ref(0);
    const message = ref("");
    const config = useConfigStore();
    const props = __props;
    const emits = __emit;
    const progress = ref([]);
    const target = ref(null);
    const { direction, isSwiping } = useSwipe(target);
    const sendMessageState = ref(false);
    const userStory = computed(() => {
      console.log("mediaStore.users ===>", mediaStore.users);
      console.log("props.id ===>", props.id);
      if (props.specifyId) {
        return mediaStore.users.find((x) => x.id === props.id);
      } else {
        return mediaStore.users[indexStory.value];
      }
    });
    let interval = void 0;
    const mediaStore = useMediaStore();
    const userStore = useUserStore();
    const isPaused = ref(false);
    const storyOwner = computed(() => {
      var _a, _b;
      return config.isSeller && ((_a = userStore.user) == null ? void 0 : _a.id) === ((_b = userStory.value) == null ? void 0 : _b.id);
    });
    watchEffect(() => {
      if (isSwiping.value && direction.value === "down") {
        emits("update:id", void 0);
      }
    });
    watch(indexStory, async (n) => {
      await indexHandle();
    });
    async function indexHandle() {
      var _a;
      storySlides.value = (_a = userStory.value) == null ? void 0 : _a.stories.length;
      progress.value = [];
      await nextTick();
      if (swiperRef.value) swiperRef.value.activeIndex = indexStory.value;
      for (let i = 0; i < storySlides.value; i++) {
        progress.value.push(0);
      }
      startOver();
    }
    const onSwiper = (swiper) => {
      swiperRef.value = swiper;
    };
    const onSlideChange = (val) => {
      playingSlide.value = 0;
      stopInterval();
      indexStory.value = val.activeIndex;
    };
    function focusMessage(val) {
      if (val !== "") sendMessageState.value = true;
      else sendMessageState.value = false;
    }
    function startOver() {
      interval = setInterval();
    }
    function stopInterval() {
      clearInterval(interval);
      interval = void 0;
    }
    watch([playingSlide, indexStory], async () => {
      var _a2;
      var _a, _b, _c, _d;
      const story = (_a = userStory.value) == null ? void 0 : _a.stories[playingSlide.value];
      const item = story.storyviews.find((item2) => {
        var _a22;
        return item2.user_id === (((_a22 = userStore.user) == null ? void 0 : _a22.id) || "me");
      });
      if ((_b = userStore.user) == null ? void 0 : _b.id) {
        if (!item) await userViewStory((_c = userStore.user) == null ? void 0 : _c.id, story.id);
      } else {
        setStorySeenLocal(story.id);
      }
      if (!item) {
        Object.assign(story, {
          storyviews: [...(_a2 = item == null ? void 0 : item.storyviews) != null ? _a2 : [], { user_id: ((_d = userStore.user) == null ? void 0 : _d.id) || "me", story_id: story.id }]
        });
      }
    }, { deep: true, immediate: true });
    return (_ctx, _push, _parent, _attrs) => {
      var _a2;
      var _a, _b;
      const _directive_lazy = resolveDirective("lazy");
      let _temp0, _temp1, _temp2;
      _push(`<div${ssrRenderAttrs(mergeProps({
        class: "flex full_story z-400 justify-center",
        dir: "ltr"
      }, _attrs))}><div class="relative w-full md:w-426px bg-black flex items-center pb-5rem">`);
      if (!isPaused.value) {
        _push(`<div class="absolute w-full top-0 right-0 left-0 z-1000 blurred-gradient-bg"><div class="flex gap-2px shadow-xl"><!--[-->`);
        ssrRenderList(userStory.value.stories, (story, index) => {
          _push(ssrRenderComponent(CustomProgressBar, {
            key: index,
            percent: progress.value[index]
          }, null, _parent));
        });
        _push(`<!--]--></div><div class="p-2 flex items-center gap-2 account-detail-area"><div class="relative"><img${ssrRenderAttrs(_temp0 = mergeProps({
          class: "w-2.5rem h-2.5rem rounded-full",
          alt: unref(reactiveProjectName)
        }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a = userStory.value) == null ? void 0 : _a.avatar), loading: unref(empty_user), error: unref(empty_user) })))}>${"textContent" in _temp0 ? ssrInterpolate(_temp0.textContent) : (_a2 = _temp0.innerHTML) != null ? _a2 : ""}`);
        if (storyOwner.value) {
          _push(`<img${ssrRenderAttr("src", _imports_0)}${ssrRenderAttr("alt", unref(reactiveProjectName))} class="w-15px absolute right-0 bottom-0 bg-white rounded-full">`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div><p class="text-white">${ssrInterpolate((_b = userStory.value) == null ? void 0 : _b.name)}</p></div></div>`);
      } else {
        _push(`<!---->`);
      }
      if (!isPaused.value) {
        _push(`<div class="absolute w-full bottom-0 right-0 left-0 blurred-gradient-bg z-2000 functions-area">`);
        if (!storyOwner.value) {
          _push(`<div class="flex gap-5 p-5 items-center">`);
          _push(ssrRenderComponent(_sfc_main$2, {
            value: message.value,
            "onUpdate:value": ($event) => message.value = $event,
            "place-holder": unref(config).useString("sendMessage"),
            onOnchange: focusMessage,
            class: "story_input flex-1"
          }, null, _parent));
          _push(`<div class="flex w-1.5rem justify-end items-center">`);
          if (!sendMessageState.value) {
            _push(ssrRenderComponent(_sfc_main$3, {
              mode: "night",
              class: "w-1.5rem"
            }, null, _parent));
          } else {
            _push(ssrRenderComponent(_sfc_main$4, {
              size: "small",
              shape: "circle",
              class: "w-2.2rem !h-2.2rem",
              type: "primary"
            }, {
              default: withCtx((_, _push2, _parent2, _scopeId) => {
                if (_push2) {
                  _push2(ssrRenderComponent(BasicIconOld, { icon: "vuesax-linear:send-1" }, null, _parent2, _scopeId));
                } else {
                  return [
                    createVNode(BasicIconOld, { icon: "vuesax-linear:send-1" })
                  ];
                }
              }),
              _: 1
            }, _parent));
          }
          _push(`</div></div>`);
        } else {
          _push(`<div class="flex gap-5 p-5 items-center mx4" dir="rtl"><div class="flex flex-col items-center gap-3 text-white">`);
          _push(ssrRenderComponent(BasicIconOld, {
            icon: "vuesax-linear:trash",
            size: "22"
          }, null, _parent));
          _push(`<div class="text-xs">${ssrInterpolate(unref(config).useString("delete"))}</div></div><div class="flex flex-col items-center gap-3 text-white"><img${ssrRenderAttr("src", _imports_1)}${ssrRenderAttr("alt", unref(reactiveProjectName))}><div class="text-xs">${ssrInterpolate(unref(config).useString("highlight"))}</div></div></div>`);
        }
        _push(`</div>`);
      } else {
        _push(`<!---->`);
      }
      _push(`<div class="w-full">`);
      _push(ssrRenderComponent(unref(Swiper), {
        key: indexStory.value,
        ref_key: "swiperRef",
        ref: swiperRef,
        onSwiper,
        onSlideChange,
        initialSlide: indexStory.value,
        grabCursor: true,
        effect: "creative",
        creativeEffect: {
          prev: { shadow: true, origin: "left center", translate: ["-5%", 0, -200], rotate: [0, 100, 0] },
          next: { origin: "right center", translate: ["5%", 0, -200], rotate: [0, -100, 0] }
        },
        modules,
        class: "mySwiper6"
      }, {
        default: withCtx((_, _push2, _parent2, _scopeId) => {
          if (_push2) {
            if (!_ctx.specifyId) {
              _push2(`<!--[-->`);
              ssrRenderList(unref(mediaStore).users, (story, i) => {
                _push2(ssrRenderComponent(unref(SwiperSlide), {
                  key: i,
                  class: "self-center"
                }, {
                  default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                    var _a3;
                    var _a22, _b2;
                    if (_push3) {
                      _push3(`<img${ssrRenderAttrs(_temp1 = mergeProps({
                        alt: unref(reactiveProjectName),
                        class: "w-full bg-black select-none pointer-events-none",
                        key: i,
                        draggable: "false"
                      }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = story.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId2}>${"textContent" in _temp1 ? ssrInterpolate(_temp1.textContent) : (_a3 = _temp1.innerHTML) != null ? _a3 : ""}`);
                    } else {
                      return [
                        withDirectives((openBlock(), createBlock("img", {
                          alt: unref(reactiveProjectName),
                          class: "w-full bg-black select-none pointer-events-none",
                          key: i,
                          onContextmenu: withModifiers(() => {
                          }, ["prevent"]),
                          draggable: "false"
                        }, null, 40, ["alt", "onContextmenu"])), [
                          [_directive_lazy, { src: unref(getSupabaseStorageUrl)((_b2 = story.stories[playingSlide.value]) == null ? void 0 : _b2.url), loading: unref(img_gif), error: unref(img_gif) }]
                        ])
                      ];
                    }
                  }),
                  _: 2
                }, _parent2, _scopeId));
              });
              _push2(`<!--]-->`);
            } else {
              _push2(ssrRenderComponent(unref(SwiperSlide), { class: "self-center" }, {
                default: withCtx((_2, _push3, _parent3, _scopeId2) => {
                  var _a3;
                  var _a22, _b2;
                  if (_push3) {
                    _push3(`<img${ssrRenderAttrs(_temp2 = mergeProps({
                      alt: unref(reactiveProjectName),
                      class: "w-full bg-black select-none pointer-events-none",
                      key: _ctx.i
                    }, ssrGetDirectiveProps(_ctx, _directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) })))}${_scopeId2}>${"textContent" in _temp2 ? ssrInterpolate(_temp2.textContent) : (_a3 = _temp2.innerHTML) != null ? _a3 : ""}`);
                  } else {
                    return [
                      withDirectives((openBlock(), createBlock("img", {
                        alt: unref(reactiveProjectName),
                        class: "w-full bg-black select-none pointer-events-none",
                        key: _ctx.i
                      }, null, 8, ["alt"])), [
                        [_directive_lazy, { src: unref(getSupabaseStorageUrl)((_b2 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _b2.url), loading: unref(img_gif), error: unref(img_gif) }]
                      ])
                    ];
                  }
                }),
                _: 1
              }, _parent2, _scopeId));
            }
          } else {
            return [
              !_ctx.specifyId ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList(unref(mediaStore).users, (story, i) => {
                return openBlock(), createBlock(unref(SwiperSlide), {
                  key: i,
                  class: "self-center"
                }, {
                  default: withCtx(() => {
                    var _a22;
                    return [
                      withDirectives((openBlock(), createBlock("img", {
                        alt: unref(reactiveProjectName),
                        class: "w-full bg-black select-none pointer-events-none",
                        key: i,
                        onContextmenu: withModifiers(() => {
                        }, ["prevent"]),
                        draggable: "false"
                      }, null, 40, ["alt", "onContextmenu"])), [
                        [_directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = story.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) }]
                      ])
                    ];
                  }),
                  _: 2
                }, 1024);
              }), 128)) : (openBlock(), createBlock(unref(SwiperSlide), {
                key: 1,
                class: "self-center"
              }, {
                default: withCtx(() => {
                  var _a22;
                  return [
                    withDirectives((openBlock(), createBlock("img", {
                      alt: unref(reactiveProjectName),
                      class: "w-full bg-black select-none pointer-events-none",
                      key: _ctx.i
                    }, null, 8, ["alt"])), [
                      [_directive_lazy, { src: unref(getSupabaseStorageUrl)((_a22 = userStory.value.stories[playingSlide.value]) == null ? void 0 : _a22.url), loading: unref(img_gif), error: unref(img_gif) }]
                    ])
                  ];
                }),
                _: 1
              }))
            ];
          }
        }),
        _: 1
      }, _parent));
      _push(`</div></div></div>`);
    };
  }
});
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/FullScreenStories.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};

export { CustomProgressBar as C, _sfc_main as _, _imports_0 as a, img_gif as i, setInterval as s };
//# sourceMappingURL=FullScreenStories-BJPLTwoO.mjs.map