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