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