import { d as useI18n, g as _sfc_main$1, f as __nuxt_component_0, a as _export_sfc } from "../server.mjs";
import { _ as __nuxt_component_3 } from "./ArrowDownIcon-Bp8y2Jec.js";
import { _ as __nuxt_component_1$1, a as __nuxt_component_2 } from "./GradientArrowLeftIcon-C3AVRIT6.js";
import _sfc_main$2 from "./EmptyState-CWK2sm1Q.js";
import { defineComponent, computed, ref, watch, nextTick, mergeProps, unref, withCtx, createTextVNode, toDisplayString, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrInterpolate, ssrRenderList, ssrRenderClass, ssrRenderComponent, ssrRenderAttr } from "vue/server-renderer";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/hookable/dist/index.mjs";
import "ofetch";
import "#internal/nuxt/paths";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/unctx/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/h3/dist/index.mjs";
import "pinia";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/defu/dist/defu.mjs";
import "@pinia/colada";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/klona/dist/index.mjs";
import "vue-router";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/radix3/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/cookie-es/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/destr/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/ohash/dist/index.mjs";
import "D:/marwa/front/webstdy-v2-frontend/node_modules/@unhead/vue/dist/index.mjs";
import "@vue/devtools-api";
import "@unhead/schema-org/vue";
import "scule";
import "deep-pick-omit";
import "@iconify/vue";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "StackedProductsCarousel",
  __ssrInlineRender: true,
  props: {
    projects: {}
  },
  setup(__props) {
    const { locale } = useI18n();
    const props = __props;
    computed(() => locale.value === "ar");
    const currentIndex = ref(0);
    ref(true);
    ref(5e3);
    ref(false);
    ref("next");
    const scrollOverlayVisible = ref({});
    const itemRefs = ref({});
    const getItemPosition = (index) => {
      var _a;
      const totalItems = ((_a = props.projects) == null ? void 0 : _a.length) || 0;
      if (totalItems === 0) return 1;
      const relativeIndex = (index - currentIndex.value + totalItems) % totalItems;
      return relativeIndex + 1;
    };
    const getCurrentProject = computed(() => {
      if (!props.projects || props.projects.length === 0) return null;
      const total = props.projects.length;
      return props.projects.find((_, index) => getItemPosition(index) === 3) ?? props.projects[currentIndex.value % total];
    });
    watch(
      () => currentIndex.value,
      () => {
        nextTick(() => {
          var _a;
          for (const [idStr, el] of Object.entries(itemRefs.value)) {
            if (el) {
              el.scrollTop = 0;
              const idNum = Number(idStr);
              const proj = (_a = props.projects) == null ? void 0 : _a.find((p) => p.id === idNum);
              if (proj == null ? void 0 : proj.is_scroll) {
                scrollOverlayVisible.value[idNum] = true;
              }
            }
          }
        });
      }
    );
    return (_ctx, _push, _parent, _attrs) => {
      const _component_NuxtImg = _sfc_main$1;
      const _component_SvgArrowDownIcon = __nuxt_component_3;
      const _component_SvgGradientArrowRightIcon = __nuxt_component_1$1;
      const _component_SvgGradientArrowLeftIcon = __nuxt_component_2;
      const _component_NuxtLinkLocale = __nuxt_component_0;
      const _component_EmptyState = _sfc_main$2;
      if (props.projects && props.projects.length >= 5) {
        _push(`<div${ssrRenderAttrs(mergeProps({ class: "gallery-wrapper" }, _attrs))} data-v-30008e39>`);
        if (unref(getCurrentProject)) {
          _push(`<h3 class="project-title" data-v-30008e39>${ssrInterpolate(unref(getCurrentProject).title)}</h3>`);
        } else {
          _push(`<!---->`);
        }
        _push(`<div class="gallery" data-v-30008e39><div class="gallery-container ws-no-scrollbar" data-v-30008e39><!--[-->`);
        ssrRenderList(props.projects, (project, index) => {
          _push(`<div class="${ssrRenderClass([
            "gallery-item ws-no-scrollbar overlay-gradient",
            `gallery-item-${getItemPosition(index)}`,
            getItemPosition(index) !== 3 ? "overlay-visible" : ""
          ])}" data-v-30008e39>`);
          _push(ssrRenderComponent(_component_NuxtImg, {
            src: project.slider,
            alt: project.title,
            "data-index": index + 1,
            class: ["w-full", !project.is_scroll ? "h-full object-contain" : ""],
            width: 946,
            format: "webp",
            quality: "85",
            loading: "lazy",
            decoding: "async",
            densities: "x1 x2",
            placeholder: [24, 16, 55, 0],
            "placeholder-class": "img-pixel",
            sizes: "100vw sm:100vw md:85vw lg:80vw xl:946px"
          }, null, _parent));
          if (getItemPosition(index) === 3 && project.is_scroll && unref(scrollOverlayVisible)[project.id]) {
            _push(`<div class="bg-surface-background hover:bg-surface-background/90 border-surface-border pointer-events-auto absolute bottom-2 left-1/2 z-10 -translate-x-1/2 transform animate-bounce cursor-pointer rounded-full border p-2 shadow-lg backdrop-blur-sm transition-all duration-300 hover:shadow-xl" data-v-30008e39>`);
            _push(ssrRenderComponent(_component_SvgArrowDownIcon, { class: "text-foreground h-[20px] w-[20px]" }, null, _parent));
            _push(`</div>`);
          } else {
            _push(`<!---->`);
          }
          _push(`</div>`);
        });
        _push(`<!--]--></div><div class="gallery-controls" data-v-30008e39><button${ssrRenderAttr("aria-label", _ctx.$t("ariaLabels.prevBtn"))} class="gallery-controls-previous" data-v-30008e39>`);
        _push(ssrRenderComponent(_component_SvgGradientArrowRightIcon, {
          class: ["h-5 w-5", unref(locale) === "en" ? "scale-x-[-1]" : ""]
        }, null, _parent));
        _push(`</button><button${ssrRenderAttr("aria-label", _ctx.$t("ariaLabels.nextBtn"))} class="gallery-controls-next" data-v-30008e39>`);
        _push(ssrRenderComponent(_component_SvgGradientArrowLeftIcon, {
          class: ["h-5 w-5", unref(locale) === "en" ? "scale-x-[-1]" : ""]
        }, null, _parent));
        _push(`</button></div></div>`);
        if (unref(getCurrentProject)) {
          _push(`<div class="project-description" data-v-30008e39><p class="line-clamp-2" data-v-30008e39>${ssrInterpolate(unref(getCurrentProject).short_description)}</p>`);
          _push(ssrRenderComponent(_component_NuxtLinkLocale, {
            class: "ws-gradient-border mx-auto w-fit px-4 py-2",
            to: `/our-projects/${unref(getCurrentProject).slug}`
          }, {
            default: withCtx((_, _push2, _parent2, _scopeId) => {
              if (_push2) {
                _push2(`${ssrInterpolate(_ctx.$t("projectsHighlight.know-more-button"))}`);
              } else {
                return [
                  createTextVNode(toDisplayString(_ctx.$t("projectsHighlight.know-more-button")), 1)
                ];
              }
            }),
            _: 1
          }, _parent));
          _push(`</div>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div>`);
      } else if (props.projects && props.projects.length < 5) {
        _push(`<div${ssrRenderAttrs(_attrs)} data-v-30008e39>`);
        _push(ssrRenderComponent(_component_EmptyState, {
          size: "100%",
          "custom-message": _ctx.$t("projectsCarousel.notEnoughProjects")
        }, null, _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("components/global/StackedProductsCarousel.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const __nuxt_component_1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-30008e39"]]);
export {
  __nuxt_component_1 as default
};
//# sourceMappingURL=StackedProductsCarousel-4aoLqnSs.js.map
