"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),base_liquid=require("../base/base.liquid.js"),color_liquid=require("../color/color.liquid.js"),Image_liquid=require("../image/Image.liquid.js"),ImageShopify_liquid=require("../image-shopify/ImageShopify.liquid.js"),system=require("@gem-sdk/system"),classes=require("../../common/variants/classes.js"),styles=require("../../common/variants/styles.js"),attrs=require("../../common/variants/attrs.js");const VariantItem=e=>{let{name:a,variantKey:s,value:t,id:i}=e,l="disable"===e.soldOutStyle,o=()=>core.template`
    {% case type %}
      {% when "rectangle_list" %}
      ${base_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
      {% when "color" %}
      ${color_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
      {% when "image_shopify" %}
      ${ImageShopify_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% when "image" %}
      ${Image_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% else %}
    {% endcase %}
    `,r=()=>core.template`
    ${base_liquid.default({...e,isVariantOutStock:l,swatchValue:e.value,value:t})}
    `,d=system.createClass(classes.getVariantItemLabelClass({...e,available:!0})),n=system.createClass(classes.getTooltipClass()),u=system.createClass(classes.getTooltipSvgClass()),c=system.createClass(classes.getVariantOptionClass()),p=system.createStyle(styles.getLabelVariantStyle()),m=system.createAttr(attrs.getVariantOptionAttr(e,"Liquid"));return core.template`
    ${system.Liquid(`{%- liquid
      assign option_disabled = true
      for variantItem in product.variants
        case option.position
          when 1
            if variantItem.available and variantItem.option1 == value
              assign option_disabled = false
            endif
          when 2
            if variantItem.available and variantItem.option2 == value
              assign option_disabled = false
            endif
          when 3
            if variantItem.available and variantItem.option3 == value
              assign option_disabled = false
            endif
        endcase
      endfor
    -%}`)}
    ${system.If(!l,system.Liquid("{% assign option_disabled = false %}"))}
    <label
      id="${i}"
      for="{{product.id}}-${e.uid}-${s}"
      class="${d}"
      style="${p}"
    >
      <div class="${n}">
        <p class="gp-text-[#F9F9F9]">${t?.label}</p>
        <svg class="${u}" width="8" height="4" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M8 10L0 0L16 1.41326e-06L8 10Z" fill="#333333"/>
        </svg>
      </div>
      <input
        checked="${e.checked}"
        name="{{product.id}}-options-${a}"
        id="{{product.id}}-${e.uid}-${s}"
        value="${t?.label}"
        type="radio"
        class="gp-sr-only gp-absolute gp-bottom-0 gp-right-0"
      />
      <span class="gp-sr-only">${t?.label}</span>
      <div
        ${m}
        class="${c} ${system.LiquidIf("option_disabled == true",`${system.If(l,"gp-opacity-20"," ")}`)}">
        ${e.isRenderDefault?r():o()}
      </div>
    </label>`};exports.default=VariantItem;
