import{template as e,isLocalEnv as o,baseAssetURL as r,WrapRenderChildren as s,RenderChildren as t}from"@gem-sdk/core";import{getConditionRenderGalleryImages as i,getStyleInsideLayout as a,setDefaultWhenUndefineSetting as p}from"./common/common.js";import l from"./components/feature-gallery/FeatureImageWithGallery.liquid.js";import d from"./components/gallery-carousel/GalleryCarousel.liquid.js";import m from"./components/gallery-grid/GalleryGrid.liquid.js";import{getSettingPreloadData as c}from"../../../helpers.js";import{getShapeByLayout as u,sizeSettingDefaultForNewLayout as n}from"./common/productGallery.js";import{getProductImagesClassName as g}from"./composables/getProductImagesClassName.js";import{getProductImagesStyles as f}from"./composables/getProductImagesStyles.js";import{createAttr as $,LiquidIf as y,createClass as h,If as S,Liquid as j}from"@gem-sdk/system";import{getBorderActiveCss as v}from"./common/getBorderActiveCss.js";import{getStyleOfObject as F}from"../../helpers/function.js";let ProductImages=I=>{let P=p(I),{setting:C,styles:G,builderProps:D,style:b}=P,{rawChildren:z,pageContext:O}=I,{enableLazyLoadImage:_}=O??{},N={...C,...G},A=`
    {
      "id":${JSON.stringify(D?.uid)},
      "pageContext": ${JSON.stringify(O)},
      "setting":${JSON.stringify(C)},
      "styles":${JSON.stringify(G)},
      "productUrl":{{product.url | json | escape}},
      "product":{{product | json | escape}},
      "collectionUrl": {{ collection.url | json | escape }},
      "collection": {{ collection | json | escape}}
    }
  `,B=$({"section-id":"{{section.id}}","data-id":`${D?.uid}`}),{isOnlyFeatureAllDevices:U,isRenderGalleryGrid:k}=i(N?.position,C?.type),q=k?{}:$({"data-only-image":y("product.media.size > 1","false","true")}),{wrapperClasses:E,productImagesGalleryClasses:J}=g(I),w=h({"gp-grid gp-w-full !gp-m-0 gp-relative":!0}),T=h({"gp-w-full !gp-m-0 gp-relative":!0}),{wrapContainerStyle:x,wrapContainerStyleOnlyOneImage:L,galleryImageStyle:M}=f(N),R=u({shape:N.shape,shapeForBottom:N.shapeForBottom,shapeFor1Col:N.shapeFor1Col,shapeFor2Col:N.shapeFor2Col,shapeForFtOnly:N.shapeForFtOnly,shapeForInsideBottom:N.shapeForInsideBottom??n,shapeForInside:N.shapeForInside??n},N.position),V=a(N.position,R,N?.spacing),W=()=>e`
      ${s({uid:D?.uid||"",customProps:z?.[0].customProps},z?.map(o=>{if(o)return e`${t({...o,isInsideProductImage:!0,imageData:{imageShape:G?.ftShape,imageAlign:G?.align,imageLayout:G?.position},dotData:{dotSize:C?.ftDotSize,dotGapToCarousel:C?.ftDotGapToCarousel,dotStyle:C?.ftDotStyle}})}`}))}
    `,H=()=>e`
      <div
        class="${J}"
        style="${F(M)}"
        ${{...q}}
      >
        ${y("product.media.size > 1",d({builderPropUID:`gp-gallery-${D?.uid}`,...N,enableLazyLoadImage:_}))}
        ${S(k,m({builderPropUID:D?.uid,wrapperStyle:{...V},children:W(),...N,enableLazyLoadImage:_}))}
      </div>
    `,K=()=>C?.borderActive?.border!=="none";return e`
  ${S(K(),y("product.media.size > 1",`<style>${v({settings:N,uid:D?.uid,type:"Liquid"})}</style>`),"")}
  ${j(`
    {% assign featured_image = product.featured_image %}
    ${y("variant != null and variant.featured_image != null","{% assign featured_image = variant.featured_image %}")}
  `)}
    <gp-product-images
      gp-data='${A}'
      ${{...B}}
      style="${{...b}}"
      class="${E}"
    >
      <div
        class="${y("product.media.size > 1",`${w}`,`${T}`)}"
        style="${y("product.media.size > 1",F(x),F(L))}"
      >
        ${l({builderPropUID:`gp-carousel-${D?.uid}`,...N,children:W(),enableLazyLoadImage:_})}
        ${S(!U,H())}
      </div>
    </gp-product-images>
    ${S(o,`<script ${c('class="gps-link" delay',"src")}="{{ 'gp-product-images-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${c('class="gps-link" delay',"src")}="${r}/assets-v2/gp-product-images-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
  `};export{ProductImages as default};
