import{cls as e,makeStyleResponsive as i,template as a,getResponsiveValueByScreen as t}from"@gem-sdk/core";import d from"../../../image/components/NextImage.liquid.js";import{getFeatureImageAspectRatio as r,getStyleFeaturedImageWidth as s,getStyleFeatureImageJustify as l,getZoomImageClass as o,getZoomLenClass as f}from"./common/productFeaturedImage.js";import{getDisplayStyle as m}from"./common/helpers.js";import n from"../../../image/components/Modal3d.liquid.js";import u from"../../../image/components/Video.liquid.js";let g=({...g})=>{let p=r(g.ftCustomAspectRadio,g.ftAspectRatio),c=g?.clickEffect!==void 0&&g?.clickEffect=="link",v=c?"a":"div",h=()=>u({src:"{{mediaSourceVideo}}",alt:"{{mediaVideoAlt}}",autoplay:!0,allowfullscreen:!0,controls:!0,style:{width:"100%",height:"100%"}}),_=e=>a`
    ${d({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:g?.ftLayout,aspectRatio:p},priority:!0,className:`gp-w-full featured-image-only ${e}`})}`;return a`<div
  class="featured-image-root gp-product-images-ft gp-flex"
  style="${{...l(g.position),...m(e=>!!g?.featureImageVisible&&!t(g?.featureImageVisible,e),"flex"),...s(g)}}"
>
  <${v} ${{...c?{href:"#"}:{role:"presentation"}}}
    media-type="{{product.featured_media.media_type}}"
    class="featured-image-wrapper ${e("gp-relative gp-flex gp-w-full",{"gp-overflow-hidden":g?.zoomType!=="glasses"})}"
    style="${{...i("aspect",p)}}"
  >
  <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 %}

    ${`
    {% assign featureMedia = product.media.first %}
    {%- assign variant = product.selected_or_first_available_variant -%}
    {% assign shouldHidden = '' %}
    {% if featureMedia.media_type == 'model' %}
      ${n({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%"}})}
    {% endif %}
    {% if featureMedia.media_type == 'video' %}
      ${h()}
    {% endif %}
    {% if featureMedia.media_type == 'external_video' %}
      ${h()}
    {% endif %}
    {% if featureMedia.media_type != 'image' %}
      {% assign shouldHidden = 'hidden' %}
    {% endif %}
    ${_(e("gp-w-full gp-transition-opacity",{"group-hover:gp-opacity-0":"other"==g.hoverEffect},"{{shouldHidden}}"))}
    ${g?.hoverEffect!=="none"?`<div class="${e("zoom-element !gp-max-w-none",o())}">
          ${_("image-zoom")}
        </div>`:""}
    ${g?.hoverEffect=="zoom"&&g?.zoomType=="glasses"?`
    <div class="${e("zoom-lens-element",f())}"
    style="opacity: 0; background-image: url('{{ product.featured_image.src | img_url: "1024x1024"}}')"></div>`:""}
    `}
    </div>
  </div>
  </${v}>
</div>`};export{g as default};
