import{jsx as e}from"react/jsx-runtime";import{memo as o,forwardRef as r,useRef as t,useImperativeHandle as a}from"react";import{useCurrentDevice as s,getResponsiveValueByScreen as m,makeStyleResponsive as i}from"@gem-sdk/core";import{handleMouseMove as l,handleMouseOut as n}from"../../common/hoverAction.js";import{getProductImagesStyles as u}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as d}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as c}from"../../composables/getProductImagesAttr.js";import{createStyle as g}from"@gem-sdk/system";import{getFeaturedImageOnlyOneImageStyle as p}from"../../common/styles.js";import f from"../../../../../carousel-v3/components/root/Carousel.js";import h from"../../../../../carousel-v3/components/item/CarouselItem.js";import C from"./ProductFeaturedImageOnly.js";import{useProductFeaturedImageCarousel as v}from"../../hooks/useProductFeaturedImageCarousel.js";let ProductFeaturedImageCarousel=r((o,r)=>{let{productImages:I,imgRef:j,onHandleClick:w,onClickArrow:y,onHandleLoaded:P,onHandleUpdateActiveIndex:b,swiperUpdateTrigger:k,builderPropUID:M,builderPropsClass:S,parentUid:x,isFilterByVariantEnabled:A,...F}=o,H=t(null),{ref:N,imageActive:O,imageActiveIndex:R,imageShowWhenHover:B,enableOpenLightBox:W,filteredProductImages:$,isRenderFeatureCarousel:L,genRandomKey:T,getAspectRatioFinal:D,emitUpdateActiveIndex:q}=v(o);a(r,()=>({getSwiper:()=>H.current?.getSwiper()||null}));let z=s(),{galleryItemClasses:E,featureImageOnlyOneImageClasses:G}=d(F),{featuredImageCarouselStyle:J,featureImageCarouselItemStyle:K}=u(F),Q=g({...p({setting:F,options:{enableRadius:!0,enableHeight:!0}})}),{featuredImageCarouselSettingAttrs:U}=c(F);return e("div",{ref:N,"data-slot":"children",className:"product-feature-image",children:L?e(f,{ref:H,parentClass:S,elmRef:j,setting:U,styles:J,builderProps:{uid:M},isHiddenArrowWhenDisabled:!0,onLoaded:e=>P&&P(e),onChangeActive:e=>q(e),onClickArrow:()=>y&&y(T()),moveToIdx:R,disableMarginAuto:!0,thumbsSwiper:`#gp-carousel-${M}-carousel`,onHandleChangeSlideByInteraction:e=>{let o=$?.length??0,r=e>=o?0:e;w($?.[r]?.id??"",W)},children:$?.map(o=>e(h,{contentType:"productImage",className:E("gp-ft-image-item !gp-min-w-full !gp-max-w-full"),onClickItem:()=>{let e=m(F?.ftClickOpenLightBox,z);"none"!==e&&w(o?.id??"",W)},style:K,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),children:e(C,{image:o,imageShowWhenHover:B,setting:F,aspectRatio:D()})},o?.id))}):e("div",{ref:j,className:"gp-flex gp-w-full",style:{...i("jc",F?.align)},"data-id":M,children:e("div",{"aria-hidden":"true",className:G,style:Q,onMouseMove:e=>l(e,F),onMouseOut:e=>n(e),onBlur:()=>void 0,onClick:()=>{w(O?.id??"",W)},children:e(C,{image:A?I?.[0]:O,imageShowWhenHover:B,setting:F,aspectRatio:D(A?I?.[0]:O)})})})})});var ProductFeaturedImageCarousel$1=o(ProductFeaturedImageCarousel);export{ProductFeaturedImageCarousel$1 as default};
