import{useFeaturedImageGlobal as e,useCurrentDevice as t,useInteraction as r,useEditorMode as i,getResponsiveValueByScreen as o}from"@gem-sdk/core";import{createRef as n,useMemo as a,useCallback as l,useEffect as m}from"react";import{getAspectRatio as c}from"../common/common.js";import{checkRenderFeaturedCarousel as u}from"../common/productFeaturedImage.js";import{useFilterImagesByVariant as d}from"./useFilterImagesByVariant.js";import{handleSetSrcForFeatureProductImage as h}from"../../../../image/common/helpers.js";let p=p=>{let g;let{productImages:s,imgRef:f,onHandleClick:y,onClickArrow:S,onHandleLoaded:v,onHandleUpdateActiveIndex:I,builderPropUID:q,builderPropsClass:k,children:b,parentUid:x,...w}=p,T=e(),$=t(),B=n(),{onListener:j,ref:F}=r(),P=i(),{filteredProductImages:C}=d({productImages:s,displayByVariant:w?.displayByVariant,variantSelect:w?.variantSelect}),E=a(()=>{let e=C?.findIndex(e=>e.id===T?.id);return e&&e>=0?e:0},[C,T]),O=a(()=>u(w),[w]),R=a(()=>{if(C?.length)return T||C?.[0]},[C,T]),V=a(()=>"popup"===o(w.ftClickOpenLightBox,$),[w.ftClickOpenLightBox,$]),A=a(()=>w?.otherImage?C&&w.otherImage>=C.length-1||C&&-1===w.otherImage?C.length-1:w.otherImage:0,[w?.otherImage,C]),L=a(()=>w?.hoverEffect==="other"?C?.[A]:C?.find(e=>e.id===T?.id)||C?.[0],[T?.id,A,C,w?.hoverEffect]),z=e=>{let t="1/1",r=0;return e?e.width&&e.height&&(t=`${e.width}/${e.height}`):C?.forEach(e=>{if(e.width&&e.height){let i=e.height/e.width;i>r&&(r=i,t=`${e.width}/${e.height}`)}}),t},K=l(()=>{h({builderPropUID:q,ftShape:w.ftShape,qualityType:w.qualityType,qualityPercent:w.qualityPercent})},[w.ftShape,w.qualityPercent,w.qualityType,q]),M=()=>{let e=`[data-id="${q}"]`;j({event:"gp:change-image-step",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.moveToSlideInteraction({element:r,data:i,isRollback:o,key:n})}),j({event:"gp:change-next-slide",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.nextSlideInteraction({element:r,data:i,isRollback:o,key:n})}),j({event:"gp:change-previous-slide",selector:e},t=>{let r=(F.current||document).querySelector(e),{data:i,isRollback:o,uniqueStorageKey:n}=t||{};B?.current?.previousSlideInteraction({element:r,data:i,isRollback:o,key:n})})};return m(()=>{if("edit"===P)return;let e=document?.querySelector(`.gem-slider-item-${q} .featured-image-only`);if(!e)return;K();let t=new ResizeObserver(()=>{K()});return t?.observe(e,{}),()=>{t?.disconnect()}},[K,q,P]),m(()=>{M()},[]),m(()=>{!O&&v&&v(!0,0)},[O,v]),{ref:F,imageActive:R,imageActiveIndex:E,imageShowWhenHover:L,enableOpenLightBox:V,filteredProductImages:C,isRenderFeatureCarousel:O,genRandomKey:function(){return Math.random().toString(36).substr(2,5)},getAspectRatioFinal:e=>{let t=c(w.ftShape),r=z(e);return{desktop:t.desktop??r,tablet:t.tablet??r,mobile:t.mobile??r}},emitUpdateActiveIndex:e=>{g&&clearTimeout(g),g=setTimeout(()=>I&&I(e),500)}}};export{p as useProductFeaturedImageCarousel};
