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