import{template as a}from"@gem-sdk/core";import t from"../base/base.liquid.js";import i from"../color/color.liquid.js";import e from"../image/Image.liquid.js";import s from"../image-shopify/ImageShopify.liquid.js";import{createClass as o,createStyle as l,createAttr as n,Liquid as d,If as p,LiquidIf as r}from"@gem-sdk/system";import{getVariantItemLabelClass as c,getTooltipClass as m,getTooltipSvgClass as h,getVariantOptionClass as u}from"../../common/variants/classes.js";import{getLabelVariantStyle as v}from"../../common/variants/styles.js";import{getVariantOptionAttr as g}from"../../common/variants/attrs.js";let VariantItem=f=>{let{name:w,variantKey:$,value:b,id:k}=f,y="disable"===f.soldOutStyle,V=()=>a`
    {% case type %}
      {% when "rectangle_list" %}
      ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:""}})}
      {% when "color" %}
      ${i({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"45px"},swatchWidth:{desktop:"45px"}})}
      {% when "image_shopify" %}
      ${s({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% when "image" %}
      ${e({...f,isVariantOutStock:y,swatchValue:f.value,value:b,swatchHeight:{desktop:"64px"},swatchWidth:{desktop:"64px"}})}
      {% else %}
    {% endcase %}
    `,x=()=>a`
    ${t({...f,isVariantOutStock:y,swatchValue:f.value,value:b})}
    `,I=o(c({...f,available:!0})),_=o(m()),j=o(h()),S=o(u()),q=l(v()),O=n(g(f,"Liquid"));return a`
    ${d(`{%- 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
    -%}`)}
    ${p(!y,d("{% assign option_disabled = false %}"))}
    <label
      id="${k}"
      for="{{product.id}}-${f.uid}-${$}"
      class="${I}"
      style="${q}"
    >
      <div class="${_}">
        <p class="gp-text-[#F9F9F9]">${b?.label}</p>
        <svg class="${j}" 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="${f.checked}"
        name="{{product.id}}-options-${w}"
        id="{{product.id}}-${f.uid}-${$}"
        value="${b?.label}"
        type="radio"
        class="gp-sr-only gp-absolute gp-bottom-0 gp-right-0"
      />
      <span class="gp-sr-only">${b?.label}</span>
      <div
        ${O}
        class="${S} ${r("option_disabled == true",`${p(y,"gp-opacity-20"," ")}`)}">
        ${f.isRenderDefault?x():V()}
      </div>
    </label>`};export{VariantItem as default};
