'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSelectedOption as o,useProduct as a,useVariantOutStock as i}from"@gem-sdk/core";import{useMemo as l}from"react";import r from"../base/base.js";import s from"../color/color.js";import n from"../image/Image.js";import m from"../image-shopify/ImageShopify.js";import c from"../rectangle-list/RectangleList.js";import{createClass as p,createStyle as u,createAttr as d}from"@gem-sdk/system";import{getVariantItemLabelClass as h,getTooltipClass as f,getTooltipSvgClass as g,getVariantOptionClass as v}from"../../common/variants/classes.js";import{getLabelVariantStyle as b}from"../../common/variants/styles.js";import{getVariantOptionAttr as w}from"../../common/variants/attrs.js";let VariantItem=y=>{let{name:N,variantKey:j,optionName:S,optionValue:$,typeOfOption:k}=y,{setSelectedOption:I}=o(),O=a(),V=l(()=>{if(!y.presetConfiguration)return;let{presets:e,optionType:t}=y.presetConfiguration;return e?.[t||"rectangle_list"]},[y.presetConfiguration]),x=l(()=>{if(!y.showAsSwatches)return c;switch(k){case"color":return s;case"image":return n;case"image_shopify":return m;default:return r}},[k,y.showAsSwatches]),C=i(N??"",y.value?.label??"",{position:y.optionPosition,optionNumber:y.optionNumber||0}),L=l(()=>"disable"===y.soldOutStyle,[y.soldOutStyle]),F=l(()=>"line"===y.soldOutStyle,[y.soldOutStyle]),A=()=>{if(C||!L){I(N,y.value?.label,O?.id);let e=new CustomEvent("change-selected-option",{bubbles:!0,cancelable:!0,composed:!0,detail:{optionId:N,optionValue:y.value?.label,productId:O?.id}});window.dispatchEvent(e)}},M=p(h({...y,available:C})),P=p(f()),E=p(g()),R=p(v()),_=u(b(V?.width)),B=d(w(y,"React"));return e("label",{className:M,style:_,htmlFor:`${y.uid}-${j}`,children:[e("div",{className:P,children:[t("p",{className:"gp-text-[#F9F9F9]",children:y.value?.label}),t("svg",{className:E,width:"8",height:"4",viewBox:"0 0 16 10",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M8 10L0 0L16 1.41326e-06L8 10Z",fill:"#333333"})})]}),t("input",{checked:y.checked,name:`${O?.id}-options-${N?.toString().replaceAll('"','\\"')}`,id:`${y.uid}-${j}`,value:y.value?.label,type:"radio",className:"gp-sr-only",onChange:A}),t("span",{className:"gp-sr-only",children:y.value?.label}),t("div",{...B,className:R,children:t(x,{...y,optionName:S,optionNameValue:$,preset:V,isVariantOutStock:L&&!C&&0!==y.optionPosition,soldOutMark:L,soldOutMarkLine:F,available:C,swatchValue:y.value,product:O,variantKey:`${y.uid}-${j}`})})]})};VariantItem.defaultProps={};export{VariantItem as default};
