'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useProduct as i,useCurrentDevice as o,useCurrentVariant as r,useProductStore as l,getResponsiveValueByScreen as a,makeStyleResponsive as s,makeHeight as g,cls as p,makeStyle as m}from"@gem-sdk/core";import{useState as u,useRef as d,useMemo as n,useCallback as c,useEffect as f}from"react";import b from"./product-images/ProductFeaturedImage.js";import{getFlexDirection as h}from"../helpers/product-image.js";import{getStyleAlignment as I,checkAddOverFlowClass as y,convertUnitToNumber as V,getTypeWidthDevice as w}from"./product-images/common/helpers.js";import P from"./product-images/ProductGalleryCarousel.js";import j from"./product-images/ProductGalleryGrid.js";import x from"./product-images/ProductImagesLightBox.js";import{getStyleWidthForGallery as k,getStyleGallerySpacing as E}from"./product-images/common/productGallery.js";let DEVICES=["mobile","tablet","desktop"],getProductGallery=e=>e?.medias?.edges.map(e=>e?.node),ProductImages=H=>{let{setting:v,styles:C,builderProps:G,builderAttrs:D,style:L,children:z}=H,R={...H.styles,...H.setting},S={...H.styles,...H.setting},N=i(),U=o(),B=r(),F=l(e=>e.setProductFeaturedImage),[O,A]=u(!1),[T,_]=u(100),q=d(null),J=a(v?.galleryVisible,U),K=a(v?.featureImageVisible,U),M=n(()=>a(C?.position,U),[U,C?.position]),Q=n(()=>k({galleryVisible:v?.galleryVisible,featureImageVisible:v?.featureImageVisible,position:C?.position,width:C?.width,widthHorizontalLayout:C?.widthHorizontalLayout}),[C?.position,C?.width,C?.widthHorizontalLayout,v?.galleryVisible,v?.featureImageVisible]),W=n(()=>{let e=getProductGallery(N);return e?.length?e:[{id:N?.featuredImage?.id??"noImageError",src:N?.featuredImage?.src??"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",width:N?.featuredImage?.width??480,height:N?.featuredImage?.height??480}]},[N]),X=n(()=>I(C?.align,C?.position),[C?.position,C?.align]),Y=n(()=>W.reduce((e,t,i)=>t?{...e,[t.id]:i}:e,{}),[W]),Z=n(()=>E(C?.position,C?.gallerySpacing),[C?.position,C?.gallerySpacing]),$=n(()=>y(L),[L]),ee=n(()=>{let e={};return DEVICES.forEach(t=>{let i=V(C?.height?.[t],0),o=a(v?.galleryVisible,t),r=a(v?.featureImageVisible,t),l=a(C?.position,t),s=("left"===l||"right"===l)&&o&&r;e=i?"number"==typeof C?.height?.[t]?{...e,[t]:C?.height?.[t]+"px"}:C?.height?.[t]?.includes("%")?{...e,[t]:V(C?.height?.[t],T)*T/100+"px"}:{...e,[t]:C?.height?.[t]}:{...e,[t]:s?T+"px":"auto"}}),e},[T,C?.height,C?.position,v?.featureImageVisible,v?.galleryVisible]),et=c(()=>s("h",g(ee)),[ee]);f(()=>{if(B){let e=Y[B?.mediaId]??0,t=W[e]??N?.featuredImage;t&&F(t)}},[B,Y,W,N?.featuredImage,F]),f(()=>{let e=null;return q?.current&&(e=new ResizeObserver(()=>{_(q?.current?.offsetHeight??0)})).observe(q.current,{}),()=>{e?.disconnect()}},[v?.featureImageVisible,U]),f(()=>{v?.featureImageVisible&&setTimeout(()=>{_(q?.current?.offsetHeight??0)},100)},[v?.featureImageVisible,U]);let ei=e=>{if(!e)return;let t=Y[e];if(void 0!==t){let e=W[t];e&&F(e)}},eo=e=>{let t=v?.clickEffect=="popup"||a(v?.largeViewInPopup,U);t&&A(!0),ei(e)},er=e=>{let t=a(v?.largeViewInPopup,U);t&&eo(e),ei(e)};return e("div",{...D,className:p(G?.uid,{"gp-overflow-hidden":$}),style:{...L},children:[e("div",{className:p("gp-flex gp-w-full",{...h(H)}),style:{...X},children:[K&&t(b,{imgRef:q,productImages:W,...R,onOpenLightBox:()=>A(!0)}),J&&W.length>1&&t("div",{className:p("gp-product-images-gallery gp-inline-flex gp-h-fit gp-max-w-full",{"gp-justify-start":C?.position?.desktop=="bottom-left","tablet:gp-justify-start":C?.position?.tablet=="bottom-left","mobile:gp-justify-start":C?.position?.mobile=="bottom-left","gp-justify-center":C?.position?.desktop=="bottom-center","tablet:gp-justify-center":C?.position?.tablet=="bottom-center","mobile:gp-justify-center":C?.position?.mobile=="bottom-center","gp-mx-auto":"bottom-center"==M}),style:{...m({fs:"1.23"}),...Q,...Z,...et()},children:"slider"===w(v?.type)[U]||"left"===M||"right"===M?t(P,{productImages:W,...S,builderPropUID:G?.uid,onHandleClick:e=>er(e||"")}):t(j,{productImages:W,...S,builderPropUID:G?.uid,onHandleClick:e=>er(e||"")})})]}),(v?.clickEffect=="popup"||a(v?.largeViewInPopup,U))&&t(x,{productImages:W,builderPropUID:G?.uid,open:O,onHandleClose:()=>A(!1),imageRatio:C?.ftAspectRatio}),z]})};export{ProductImages as default};
