"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),common=require("../../common/common.js"),productFeaturedImage=require("../../common/productFeaturedImage.js"),HTML5Embed_liquid=require("../../../../../video/components/HTML5Embed.liquid.js"),Modal3d_liquid=require("../../../../../image/components/Modal3d.liquid.js"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),Video_liquid=require("../../../../../image/components/Video.liquid.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const FeatureImageWithGallery=({builderPropUID:e,children:t,enableLazyLoadImage:i,...a})=>{let{featuredImageCarouselClasses:s,galleryItemClasses:r,featuredCarouselItemClasses:d}=getProductImagesClassName.getProductImagesClassName({...a,builderProps:{uid:e}}),{featuredImageCarouselStyle:u,featureImageStyle:o,featureImageCarouselOnlyOneImageStyle:m,featureImageOnlyOneImageStyle:l,featureImageCarouselItemStyle:g}=getProductImagesStyles.getProductImagesStyles(a),{featuredImageCarouselSettingAttrs:c}=getProductImagesAttr.getProductImagesAttr(a),n=common.getAspectRatio(a.ftShape),p=()=>`
    {% case featureMedia.media_type %}
      {% when 'image' %}
        ${I()}
      {% when 'external_video' %}
        {% assign mediaSourceVideo = featureMedia | external_video_url %}
        ${y()}
      {% when 'video' %}
        {% assign mediaSourceVideo = featureMedia.sources.last.url %}
        ${h()}
      {% when 'model' %}
        ${f()}
      {% else %}
        ${q()}
    {% endcase %}
    `,f=()=>Modal3d_liquid.default({src:system.LiquidIf("featureMedia.sources.first.url contains '.glb'","{{ featureMedia.sources.first.url }}","{{featureMedia.sources.last.url}}"),alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,arStatus:"not-presenting",style:{width:"100%"},aspectRatio:n}),y=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{featureMedia.alt | escape}}",autoplay:!1,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"},aspectRatio:n}),h=()=>{let e=system.createStyle({...productFeaturedImage.getVideoHeight({ftLayout:a?.ftLayout,ftShape:a?.ftShape}),...core.makeStyleResponsive("objf",a?.ftLayout)}),t=system.createStyle({...productFeaturedImage.getVideoHeight({ftLayout:a?.ftLayout,ftShape:a?.ftShape})});return HTML5Embed_liquid.default({src:"{{mediaSourceVideo}}",title:"{{featureMedia.alt | escape}}",autoplay:!1,controls:!0,thumbnail:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",isCheckLoaded:!0,wrapperStyles:t,poster:{altText:"{{featureMedia.alt | escape}}"},style:{width:"100%","max-height":"100%",...e},className:"gp-invisible"})},I=()=>core.template`
      ${_(core.cls("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==a.hoverEffect},"{{shouldHidden}}"))}
      ${system.If(a?.hoverEffect!=="none",`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
            ${_("image-zoom",!0)}
          </div>`," ")}
      ${system.If(a?.hoverEffect=="zoom"&&a?.zoomType=="glasses",`<div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}" style="opacity: 0; background-image: url('{{ featureMedia.src | img_url: "1024x1024"}}')"></div>`," ")}
    `,_=(e,t)=>core.template`
    {% assign src = featureMedia.src %}
    ${system.If(t&&"other"==a.hoverEffect,`{% assign media_length = product.media | size %}
      {% assign other_image_index = ${a.otherImage} | plus: 0 %}
      {% if other_image_index >= media_length %}
        {% assign other_image_index = media_length | minus: 1 %}
      {% endif %}
      {% assign otherImage = product.media[other_image_index] %}
      ${system.LiquidIf("otherImage.media_type != 'image'","{% assign src = otherImage.preview_image.src %}","{% assign src = otherImage.src %}")}
    `)}
    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:system.LiquidIf("src != null",common.getSrcImage("src"),"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif"),id:system.LiquidIf("featureMedia != null","{{featureMedia.id}}"),width:"{{featureMedia.width}}",height:"{{featureMedia.height}}",alt:"{{featureMedia.alt | escape}}",srcset:`${common.getSrcImage("src")}`,baseSrc:"{{src | image_url}}",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.preload,className:`gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none ${e??""}`,enableLazyLoadImage:i})}`,q=()=>core.template`
    ${NextImage_liquid.default({srcIsLiquidCode:!0,src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",alt:"No Image",sizes:"(max-width: 768px) 50vw, 100vw",setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},priority:a?.preload,className:"gp-w-full gp-h-full gp-absolute gp-top-0 gp-left-0 featured-image-only gp-cursor-pointer !gp-rounded-none",enableLazyLoadImage:i})}`,M=common.getPaddingBottomByShapeSetting(a.ftShape),b=t=>`
    ${system.Liquid(`{% assign productImageWidth = 0 %}
    {% case featureMedia.media_type %}
      {% when 'image' %}
        {% assign productImageWidth = featureMedia.width %}
      {% else %}
        {% assign productImageWidth = featureMedia.preview_image.width %}
    {% endcase %}`)}
    ${CarouselItem_liquid.default({id:"{{section.id}}-{{imageID}}",contentType:"productImage",className:`${r(`gp-ft-image-item !gp-min-w-full !gp-max-w-full ${t??""}`)}`,parentId:`ft-${e}-{{section.id}}-{{product.id}}`,style:g,customStyle:{width:"{{productImageWidth}}px"},children:`
      <div
        class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
        style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
      >
        ${p()}
      </div>
      `})}`,v=productFeaturedImage.checkRenderFeaturedCarousel(a),w="gp-featured-image-wrapper",$=system.LiquidIf("product.media.size > 0",`{% assign largestRatio = 0 %}
      ${system.LiquidFor("featureMedia in product.media",`
          ${system.LiquidIf("featureMedia.media_type == 'video' and featureMedia.preview_image",`{% assign height = featureMedia.preview_image.height | times: 1.0 %}
            {% assign width = featureMedia.preview_image.width | times: 1.0 %}`,`{% assign height = featureMedia.height | times: 1.0 %}
            {% assign width = featureMedia.width | times: 1.0 %}`)}
          {% assign ratio = height | divided_by: width %}
          ${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
        `)}
      ${system.LiquidFor("featureMedia in product.media",`${system.LiquidIf("featureMedia.media_type == 'image'",`${system.LiquidFor("image in product.images",system.LiquidIf("image.src == featureMedia.src","{% assign imageID = image.id %}{% break %}"))}`,"{% assign imageID = '' %}")}
        ${b()}`)}
    `,NextImage_liquid.default({src:"https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif",id:"noImageError",width:"480",height:"480",alt:"no image",priority:a?.preload,setting:{layout:a?.ftLayout,aspectRatio:n,qualityType:a?.qualityType,qualityPercent:a?.qualityPercent},style:{height:"100%"},className:"gp-w-full featured-image-only !gp-rounded-none",customLazyload:!0,enableLazyLoadImage:i})),L=()=>`
      ${Carousel_liquid.default({builderProps:{uid:e},rootId:`ft-${e}-{{section.id}}-{{product.id}}`,conditionAppendJs:"product.media.size > 1",wrapperClass:w,rootClass:`${s}`,rootAttrs:{type:"gp-feature-image-carousel","product-id":"{{product.id}}","product-media":"{{product.media.size}}"},isHiddenArrowWhenDisabled:!0,setting:c,rootStyles:o,styles:u,style:{playSpeed:600},disableMarginAuto:!0,children:$,productBadgeLiquid:t||""})}
    `,S=()=>{switch(a?.preDisplay){case"1st-images":return`
          {% assign featureMedia = product.media.first %}
        `;case"1st-3d-mode":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'model'","{% assign featureMedia = media %}{% break %}"));case"1st-video":return system.LiquidFor("media in product.media",system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'","{% assign featureMedia = media %}{% break %}"));default:return`
          {% assign featureMedia = variant.featured_media %}
          {% unless featureMedia %}
          {% assign featureMedia = product.featured_media %}
          {% endunless %}
        `}},x=()=>system.Liquid(`
        {% assign featureMedia = variant.featured_media %}
        {% unless featureMedia %}
        {% assign featureMedia = product.featured_media %}
        {% endunless %}
        ${system.LiquidIf("product.media.size > 1",S())}
        {% assign largestRatio = 0 %}
        {% assign height = featureMedia.height | times: 1.0 %}
        {% assign width = featureMedia.width | times: 1.0 %}
        {% assign ratio = height | divided_by: width %}
        ${system.LiquidIf("ratio > largestRatio","{% assign largestRatio = ratio %}")}
        {% assign productImageWidth = 0 %}
        {% case featureMedia.media_type %}
          {% when 'image' %}
            {% assign productImageWidth = featureMedia.width %}
          {% else %}
            {% assign productImageWidth = featureMedia.preview_image.width %}
        {% endcase %}
        ${system.LiquidIf("featureMedia == null","{% assign productImageWidth = 1600 %}")}
        <div
          class='gp-feature-image-carousel gp-feature-image-only'
          style="${_function.getStyleOfObject(o)}"
        >
          <div
            class="gp-relative"
            style="${_function.getStyleOfObject(l)}"
          >
            ${t}
            <div
              type="gp-feature-image-only"
              product-id="{{product.id}}"
              product-media="{{product.media.size}}"
              class="${d(w)}"
              style="${_function.getStyleOfObject(m)}"
            >
              <div
                class="gp-w-full gp-relative ${system.LiquidIf("featureMedia == null or featureMedia.media_type == 'image'","{{ 'gp-h-0' }}","{{ 'gp-h-full !gp-pb-0' }}")}"
                style="${_function.getStyleOfObject(core.makeStyleResponsive("pb",M))} ${system.LiquidIf("featureMedia.media_type == 'video' or featureMedia.media_type == 'external_video'","{{ 'display: flex; align-items: center; justify-content: center' }}")}"
              >
                ${p()}
              </div>
            </div>
          </div>
        </div>
      `);return system.Liquid(`
    {% capture featureImageOnlyOne %}
      ${x()}
    {% endcapture %}
    ${system.LiquidIf("product.media.size > 1",`
        ${system.If(v,L()," ")}
        ${system.If(!v,"{{ featureImageOnlyOne }}"," ")}
      `,"{{ featureImageOnlyOne }}")}
  `)};exports.default=FeatureImageWithGallery;
