import{useCurrentDevice as e,useFeaturedImageGlobal as r,useEditorMode as o,getResponsiveValueByScreen as t}from"@gem-sdk/core";import{useState as i,useCallback as a,useEffect as s}from"react";import{getShapeByLayout as l,checkDisplayGalleryByWidth as n}from"../common/productGallery.js";import{useFilterImagesByVariant as p}from"./useFilterImagesByVariant.js";import{handleSetSrcForProductImageList as d}from"../../../../image/common/helpers.js";let useProductGalleryGrid=m=>{let{builderPropUID:y,productImages:c,activeIndexFormFeatureImage:u,children:h,isHiddenInteraction:F,...f}=m,B=e(),q=r(),[g,I]=i(0),v=o(),{filteredProductImages:G}=p({productImages:c,displayByVariant:f?.displayByVariant,variantSelect:f?.variantSelect}),P=l({shape:f.shape,shapeForBottom:f.shapeForBottom,shapeFor1Col:f.shapeFor1Col,shapeFor2Col:f.shapeFor2Col,shapeForFtOnly:f.shapeForFtOnly,shapeForInsideBottom:f.shapeForInsideBottom,shapeForInside:f.shapeForInside},f.position),b=t(f.clickOpenLightBox,B),C=n({shapeByLayout:P}),O=t(C,B),j=f?.borderActive?.border!=="none",x=a(()=>{d({builderPropUID:y,shapeByLayout:P,qualityType:f.qualityType,qualityPercent:f.qualityPercent})},[P,f.qualityPercent,f.qualityType,y]);return s(()=>{I(u||0)},[u]),s(()=>{let e=G?.findIndex(e=>e.id===q?.id);I(e&&e>0?e:0)},[q,G]),s(()=>{if("edit"===v)return;let e=document?.querySelector(".grid-gallery");if(!e)return;x();let r=new ResizeObserver(()=>{x()});return r?.observe(e,{}),()=>{r?.disconnect()}},[x,y,v]),{isDisplay:O,shapeByLayout:P,imageActiveIndex:g,enableOpenLightBox:b,isEnableBorderActive:j,filteredProductImages:G}};export{useProductGalleryGrid};
