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