"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../../image/components/NextImage.liquid.js"),productFeaturedImage=require("./common/productFeaturedImage.js"),helpers=require("./common/helpers.js"),Modal3d_liquid=require("../../../image/components/Modal3d.liquid.js"),Video_liquid=require("../../../image/components/Video.liquid.js");const ProductFeaturedImage=({...e})=>{let a=productFeaturedImage.getFeatureImageAspectRatio(e.ftCustomAspectRadio,e.ftAspectRatio),i=e?.clickEffect!==void 0&&e?.clickEffect=="link",t=i?"a":"div",d=i?{href:"#"}:{role:"presentation"},r=()=>helpers.getDisplayStyle(a=>!!e?.featureImageVisible&&!core.getResponsiveValueByScreen(e?.featureImageVisible,a),"flex"),s=()=>`
    {% assign featureMedia = product.media.first %}
    {%- assign variant = product.selected_or_first_available_variant -%}
    {% assign shouldHidden = '' %}
    {% if featureMedia.media_type == 'model' %}
      ${l()}
    {% endif %}
    {% if featureMedia.media_type == 'video' %}
      ${o()}
    {% endif %}
    {% if featureMedia.media_type == 'external_video' %}
      ${o()}
    {% endif %}
    {% if featureMedia.media_type != 'image' %}
      {% assign shouldHidden = 'hidden' %}
    {% endif %}
    ${u(core.cls("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==e.hoverEffect},"{{shouldHidden}}"))}
    ${e?.hoverEffect!=="none"?`<div class="${core.cls("zoom-element !gp-max-w-none",productFeaturedImage.getZoomImageClass())}">
          ${u("image-zoom")}
        </div>`:""}
    ${e?.hoverEffect=="zoom"&&e?.zoomType=="glasses"?`
    <div class="${core.cls("zoom-lens-element",productFeaturedImage.getZoomLenClass())}"
    style="opacity: 0; background-image: url('{{ product.featured_image.src | img_url: "1024x1024"}}')"></div>`:""}
    `,l=()=>Modal3d_liquid.default({src:"{{featureMedia.sources.first.url}}",alt:"{{featureMedia.preview_image.alt}}",poster:"{{featureMedia.preview_image.src | product_img_url: '1024x1024'}}",cameraControls:!0,dataShopifyFeature:"1.12",arStatus:"not-presenting",style:{width:"100%",height:"100%"}}),o=()=>Video_liquid.default({src:"{{mediaSourceVideo}}",alt:"{{mediaVideoAlt}}",autoplay:!0,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),u=i=>core.template`
    ${NextImage_liquid.default({src:`{%- if variant.featured_image != null -%}
              {{ variant.featured_image.src | img_url: '1024x1024'}}
            {%- elsif variant.featured_image == null -%}
              {{ featureMedia.src | img_url: '1024x1024'}}
            {%- else -%}
              {{ 'https://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_large.gif' }}
            {%- endif -%}`,id:`{%- if variant.featured_image != null -%}
              {{variant.featured_image.id}}
           {%- elsif variant.featured_image == null -%}
              {{featureMedia.id}}
            {%- endif -%}`,width:`{%- if variant.featured_image != null -%}
                {{variant.featured_image.width}}
              {%- elsif variant.featured_image == null -%}
                {{featureMedia.width}}
              {%- endif -%}`,height:`{%- if variant.featured_image != null -%}
                {{variant.featured_image.height}}
              {%- elsif variant.featured_image == null -%}
                {{featureMedia.height}}
              {%- endif -%}`,alt:`{%- if variant.featured_image != null -%}
              {{variant.featured_image.alt}}
            {%- elsif variant.featured_image == null -%}
              {{featureMedia.alt | escape}}
            {%- endif -%}`,setting:{layout:e?.ftLayout,aspectRatio:a},priority:!0,className:`gp-w-full featured-image-only ${i}`})}`;return core.template`<div
  class="featured-image-root gp-product-images-ft gp-flex"
  style="${{...productFeaturedImage.getStyleFeatureImageJustify(e.position),...r(),...productFeaturedImage.getStyleFeaturedImageWidth(e)}}"
>
  <${t} ${{...d}}
    media-type="{{product.featured_media.media_type}}"
    class="featured-image-wrapper ${core.cls("gp-relative gp-flex gp-w-full",{"gp-overflow-hidden":e?.zoomType!=="glasses"})}"
    style="${{...core.makeStyleResponsive("aspect",a)}}"
  >
  <div class="gp-flex gp-w-full gp-items-start gp-justify-center">
    <div class="featured-image gp-group gp-relative gp-w-full gp-h-full gp-overflow-hidden gp-flex gp-items-center gp-justify-center">
      {% assign hasModel3d = false %}
      {% assign hasImage = false %}
      {% assign hasVideo = false %}
      {% assign mediaSourcesModel = null %}
      {% assign mediaSourceVideo = null %}
      {% assign mediaVideoAlt = null %}

      {% for media in product.media %}
        {% if media.media_type == 'model' %}
          {% assign hasModel3d = true %}
          {% assign mediaSourcesModel = media.sources %}
        {% endif %}
      {% if media.media_type == 'video' %}
        {% assign hasVideo = true %}
        {% assign mediaSourceVideo = media.sources.last.url %}
        {% assign mediaVideoAlt = media.alt %}
      {% endif %}
      {% if media.media_type == 'external_video' %}
        {% assign hasVideo = true %}
        {% assign mediaSourceVideo = media | external_video_url %}
        {% assign mediaVideoAlt = media.alt %}
      {% endif %}
      {% if media.media_type == 'image' %}
        {% assign hasImage = true %}
      {% endif %}
    {% endfor %}

    {% if hasModel3d == true %}
      <script type="module" defer="defer" src="https://cdn.shopify.com/shopifycloud/model-viewer/v1.12/model-viewer.js"></script>
    {% endif %}

    ${s()}
    </div>
  </div>
  </${t}>
</div>`};exports.default=ProductFeaturedImage;
