import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{useRenderMode as i,useCurrentDevice as o,cls as a}from"@gem-sdk/core";import{useRef as l,useCallback as s}from"react";import d from"../gallery-carousel/GalleryCarousel.js";import m from"../child/ProductGalleryGrid.js";import u from"../child/ProductFeaturedImageCarousel.js";import{getProductImagesStyles as n}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as p}from"../../composables/getProductImagesClassName.js";import{useFeatureImageWithGallery as c}from"../../hooks/useFeatureImageWithGallery.js";let FeatureImageWithGallery=g=>{let{setting:I,styles:f,builderProps:h,gallery:y,onHandleClickImage:b,priorityFeatureImage:C,children:F,noDataChildren:P}=g,{isEditMode:v}=i(),j=l(null),k=o(),w=s(e=>{if(!j.current)return;let r=j.current.getSwiper();r&&r.thumbs.swiper?.realIndex===void 0&&e&&(r.thumbs.swiper=e,r.thumbs.init(),r.thumbs.update(!0),r.update())},[]),x={...I,...f},{isShowCarousel:G,featureImageHeight:H,featureWrapperImage:N,onClickFeatureArrow:S,activeIndexFromFeatureImage:U,setOnClickFeatureArrow:A,onHandleLoadedFeatureImage:D,setActiveIndexFromFeatureImage:W}=c(g);if(y?.[0]?.id==="noImageError"&&v)return e(r,{children:P});let{ftImageGalleryClasses:R,imageGalleryWrapperClasses:$}=p(g),{wrapperFeaturedImageStyle:E,featureImageStyle:J,galleryImageStyle:L}=n(x,{gallery:y,featureImageHeight:H}),O=JSON.stringify(x?.position)+k+G;return t("div",{className:a("gp-grid gp-w-full gp-relative"),style:E,children:[t("div",{className:R,style:J,children:[F,e(u,{ref:j,imgRef:N,productImages:y,...x,onHandleClick:(e,r)=>b(e||"",r),onHandleLoaded:D,onHandleUpdateActiveIndex:W,onClickArrow:e=>A(e),builderPropUID:h?.uid,builderPropsClass:`gp-product-images-feature-${h?.uid}`})]}),y.length>1&&e("div",{className:$,style:L,children:G?e(d,{productImages:y,position:x?.position,...x,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),onSwiperReady:w,activeIndexFormFeatureImage:U,priorityFeatureImage:C,onClickFeatureArrow:S,builderPropsClass:`gp-product-images-gallery-${h?.uid}`}):e(m,{productImages:y,...x,builderPropUID:h?.uid,onHandleClick:(e,r)=>b(e||"",r),activeIndexFromFeatureImage:U,isHiddenInteraction:!0})})]},O)};export{FeatureImageWithGallery as default};
