import{jsx as e,Fragment as o,jsxs as t}from"react/jsx-runtime";import{useCurrentDevice as r,useRenderMode as i,getResponsiveValueByScreen as a,cls as m,makeStyle as l}from"@gem-sdk/core";import{memo as c}from"react";import{getAspectRatio as s}from"../../common/common.js";import n from"../../../../../image/components/NextImage.js";import d from"../lightbox/ButtonOpenLightBox.js";import p from"./MediaIcon.js";import g from"./ProductFeatureVideo.js";import{isFeatureMedia as h,getZoomImageClass as y,getZoomLenClass as u}from"../../common/productFeaturedImage.js";import{handleMouseOut as f,handleMouseMove as v}from"../../common/hoverAction.js";import{getProductImagesClassName as j}from"../../composables/getProductImagesClassName.js";import{getProductImagesStyles as T}from"../../composables/getProductImagesStyles.js";import{useProductGalleryGrid as w}from"../../hooks/useProductGalleryGrid.js";var I=c(c=>{let{builderPropUID:I,productImages:b,onHandleClick:E,activeIndexFromFeatureImage:x,children:N,isHiddenInteraction:O,...P}=c,{isDisplay:k,shapeByLayout:G,imageActiveIndex:M,enableOpenLightBox:R,isEnableBorderActive:$,filteredProductImages:z}=w(c),A=r(),{isEditMode:B}=i(),H=a(P.position,A)||"",L=["one-col","two-col"].includes(H),V="bottom-center"===H,{galleryGridWrapperClasses:Z,galleryItemClasses:C}=j(P),{galleryGridStyles:D,galleryGridItemStyles:F}=T(P),S=V?"none":P.galleryHoverEffect;return e(o,{children:k&&t("div",{"data-slot":"children","data-id":I,className:Z,style:D,"gp-data-hidden":`${O}`,children:[z?.map((r,i)=>{let c=i===M,j=h(r.contentType)?r.previewImage:r.src,T=!B&&L&&!R&&["VIDEO","EXTERNAL_VIDEO"].includes(r?.contentType||"");return t("div",{"aria-hidden":!0,className:C(`gp-gallery-image-item gem-slider-item-${I} ${c&&$?"gem-slider-item-active":""}`),onClick:()=>E(r?.id||"",R),style:F,onMouseMove:e=>v(e,{hoverEffect:S,zoom:P.galleryZoom,zoomType:P.galleryZoomType}),onMouseOut:e=>f(e),"data-border":c&&P?.borderActive?"active":"deactive",children:[T?e(g,{type:r?.contentType,url:r?.src??"",thumbnail:r?.previewImage,aspectRatio:s(G)}):t(o,{children:[e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{aspectRatio:s(G),layout:P?.layout},style:{width:"100%",height:"100%"}},r?.id),e(p,{contentType:r?.contentType||""})]}),P?.galleryHoverEffect!=="none"&&!h(r?.contentType)&&e(n,{src:j,width:r?.width,height:r?.height,alt:r?.alt,setting:{layout:P.layout,aspectRatio:s(G)},className:m("hover-image !gp-max-w-none",y())}),P?.galleryHoverEffect=="zoom"&&P?.galleryZoomType=="glasses"&&["one-col","two-col"].includes(a(P.position,A)||"")&&!h(r?.contentType)&&e("div",{className:m(u(),"room-len"),style:{...l({bgi:`url("${r?.src}")`})}}),a(P?.clickOpenLightBox,A)&&e(d,{})]},r?.id)}),N]})})});export{I as default};
