import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as l,useUniqProductID as o,cls as d}from"@gem-sdk/core";import{useRef as a,useEffect as s,useCallback as n,useMemo as u}from"react";import m from"../gallery-carousel/GalleryCarousel.js";import c from"../child/ProductGalleryGrid.js";import p from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as g}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as f}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as I}from"../../hooks/useFeatureImageWithGallery.js";import{getProductImagesCarouselInstanceId as h,getFeatureGalleryComponentKey as b}from"../../common/common.js";let v=v=>{let{setting:y,styles:C,builderProps:x,gallery:F,featureGallery:P,onHandleClickImage:j,priorityFeatureImage:k,children:w,noDataChildren:H,isFilterByVariantEnabled:U}=v,{isEditMode:D}=i(),G=a(null),L=l(),N=o(),R=h(x?.uid,N),$=a(F);$.current=F;let A=a(P??F);A.current=P??F;let S=a(null);s(()=>()=>{S.current?.(),S.current=null},[]);let T=n((e,r)=>{if(e.destroyed||r.destroyed)return;let t=A.current[e.realIndex]?.id;if(void 0===t)return;let i=$.current.findIndex(e=>e?.id===t);if(r.slides?.forEach(e=>e.classList.remove("gem-slider-item-active")),i<0)return;let l=r.slides?.[i];l?.classList.add("gem-slider-item-active");let o=l?.getBoundingClientRect(),d=r.el?.getBoundingClientRect();if(!o||!d){r.slideTo(i);return}let a=r.params?.direction==="vertical"?o.top>=d.top-1&&o.bottom<=d.bottom+1:o.left>=d.left-1&&o.right<=d.right+1;a||r.slideTo(i)},[]),B=n(e=>{if(!G.current)return;let r=G.current.getSwiper();if(r&&e){if(S.current?.(),S.current=null,U){let t=()=>T(r,e);r.on("slideChange",t),S.current=()=>{r.destroyed||r.off("slideChange",t)},t();return}r.thumbs&&r.thumbs.swiper&&r.thumbs.swiper?.realIndex===void 0&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())}},[U,T]),E={...y,...C},{isShowCarousel:W,featureImageHeight:q,featureWrapperImage:z,onClickFeatureArrow:J,activeIndexFromFeatureImage:K,setOnClickFeatureArrow:M,onHandleLoadedFeatureImage:O,setActiveIndexFromFeatureImage:Q}=I(v),V=u(()=>{if(void 0===K)return;let e=(P??F)[K]?.id;if(void 0===e)return;let r=F.findIndex(r=>r?.id===e);return r>-1?r:void 0},[K,P,F]);if(F?.[0]?.id==="noImageError"&&D)return e(r,{children:H});let{ftImageGalleryClasses:X,imageGalleryWrapperClasses:Y}=f(v),{wrapperFeaturedImageStyle:Z,featureImageStyle:_,galleryImageStyle:ee}=g(E,{gallery:F,featureImageHeight:q}),er=`${b(E,L,W)}|${U?"variant-filtered":"all-media"}`;return t("div",{className:d("gp-grid gp-w-full gp-relative"),style:Z,children:[t("div",{className:X,style:_,children:[w,e(p,{ref:G,imgRef:z,productImages:P??F,enableThumbsLink:!U,...E,onHandleClick:(e,r)=>j(e||"",r,!0),onHandleLoaded:O,onHandleUpdateActiveIndex:Q,onClickArrow:e=>M(e),builderPropUID:x?.uid,carouselInstanceUID:R,builderPropsClass:`gp-product-images-feature-${x?.uid}`})]}),F.length>(U?0:1)&&e("div",{className:Y,style:ee,children:W?e(m,{productImages:F,position:E?.position,...E,builderPropUID:x?.uid,carouselInstanceUID:R,onHandleClick:(e,r)=>j(e||"",r),onSwiperReady:B,activeIndexFormFeatureImage:V,priorityFeatureImage:k,onClickFeatureArrow:J,builderPropsClass:`gp-product-images-gallery-${x?.uid}`}):e(c,{productImages:F,...E,builderPropUID:x?.uid,onHandleClick:(e,r)=>j(e||"",r),activeIndexFromFeatureImage:V,isHiddenInteraction:!0})})]},er)};export{v as default};
