import { defineComponent, ref, onMounted, onUnmounted, computed, watch, mergeProps, useSSRContext } from "vue";
import { ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderAttr, ssrRenderStyle } from "vue/server-renderer";
import Swiper from "swiper/bundle";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "SliderType1",
  __ssrInlineRender: true,
  props: {
    status: {},
    component_id: {},
    data: {}
  },
  setup(__props) {
    const props = __props;
    const screenWidth = ref(typeof window !== "undefined" ? window.innerWidth : 1024);
    const updateScreenWidth = () => {
      screenWidth.value = window.innerWidth;
    };
    onMounted(() => {
      updateScreenWidth();
      window.addEventListener("resize", updateScreenWidth);
    });
    onUnmounted(() => {
      window.removeEventListener("resize", updateScreenWidth);
    });
    const computedHeight = computed(() => {
      const style = props.data.style;
      if (!style) return "400px";
      const desktop = style.desktop_height;
      const mobile = style.mobile_height;
      if (screenWidth.value <= 768) {
        return `${mobile ?? 120}px`;
      } else {
        return `${desktop ?? 400}px`;
      }
    });
    const filteredSlides = computed(() => {
      const isMobile = screenWidth.value <= 768;
      return props.data.slider.filter((item) => {
        if (isMobile) {
          return item.show_on_mobile ?? true;
        } else {
          return item.show_on_desktop ?? true;
        }
      });
    });
    const noDeviceRestriction = computed(() => {
      return props.data.slider.every((item) => item.show_on_desktop === void 0 && item.show_on_mobile === void 0);
    });
    const isLoaded = ref(false);
    let swiperInstance = null;
    const swiperMainSlider = () => {
      if (swiperInstance) {
        swiperInstance.destroy(true, true);
      }
      swiperInstance = new Swiper(".swiper-main-slider-" + props.component_id, {
        slidesPerView: 1,
        effect: "fade",
        loop: filteredSlides.value.length > 1,
        fadeEffect: {
          crossFade: true
        },
        spaceBetween: 10,
        autoplay: {
          delay: 7e3
        },
        pagination: {
          el: ".swiper-pagination",
          type: "bullets",
          clickable: true
        },
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        on: {
          init: () => {
            isLoaded.value = true;
          }
        }
      });
    };
    onMounted(() => {
      swiperMainSlider();
    });
    watch(filteredSlides, () => {
      setTimeout(() => swiperMainSlider(), 50);
    });
    return (_ctx, _push, _parent, _attrs) => {
      var _a, _b;
      if (filteredSlides.value.length > 0 || noDeviceRestriction.value) {
        _push(`<div${ssrRenderAttrs(mergeProps({
          id: "component-" + _ctx.component_id,
          class: { container: true, readonly: _ctx.status == "dev" },
          style: "margin-top:" + (((_a = _ctx.data.style) == null ? void 0 : _a.margin.top) ?? 0) + "px; margin-bottom:" + (((_b = _ctx.data.style) == null ? void 0 : _b.margin.bottom) ?? 20) + "px;"
        }, _attrs))} data-v-f845ecb1><div class="row" data-v-f845ecb1><div class="col-12 swiper-container" data-v-f845ecb1><div class="${ssrRenderClass("swiper swiper-main-slider swiper-main-slider-" + props.component_id)}" data-v-f845ecb1><div class="swiper-wrapper" data-v-f845ecb1><!--[-->`);
        ssrRenderList(filteredSlides.value, (item, index) => {
          _push(`<div class="${ssrRenderClass({ "swiper-slide": true, readonly: _ctx.status == "dev" })}" data-v-f845ecb1><a${ssrRenderAttr("href", item.link)} data-v-f845ecb1></a><div class="${ssrRenderClass({ image: true, "sk sk-super-dark": !isLoaded.value })}" style="${ssrRenderStyle({
            backgroundImage: `url(${item.src})`,
            height: computedHeight.value + " !important"
          })}" data-v-f845ecb1></div><img${ssrRenderAttr("src", item.src)}${ssrRenderAttr("alt", item.alt)} class="d-none" loading="lazy" data-v-f845ecb1></div>`);
        });
        _push(`<!--]-->`);
        if (filteredSlides.value.length === 0) {
          _push(`<div class="${ssrRenderClass({ "swiper-slide": true, readonly: _ctx.status == "dev" })}" data-v-f845ecb1><div class="image" data-v-f845ecb1></div></div>`);
        } else {
          _push(`<!---->`);
        }
        _push(`</div><div class="swiper-pagination" data-v-f845ecb1></div></div></div></div></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("resources/js/Components/Main/UI/Sliders/SliderType1.vue");
  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
};
const SliderType1 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f845ecb1"]]);
export {
  SliderType1 as default
};
