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