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