'use client';
import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSelectedOption as o,useProduct as l,useVariantOutStock as i,cls as n}from"@gem-sdk/core";import{useMemo as a}from"react";import r from"./RectangleList.js";import{postPurchaseSpacing as s}from"../../../../../common/helper.js";let d=({name:d,variantKey:p,...u})=>{let{setSelectedOption:m}=o(),c=l(),g=a(()=>{if(!u.presetConfiguration)return;let{presets:e,optionType:t}=u.presetConfiguration;return e?.[t||"rectangle_list"]},[u.presetConfiguration]),b=g?.itemSpacing,f=g?.numberPerRow||5,h=a(()=>({minWidth:`${100/f}%`,paddingLeft:s[b||"none"],paddingTop:s[b||"none"],width:`${100/f}%`}),[b,f]),O=a(()=>r,[]),k=i(d??"",u.value?.label??"",{position:u.optionPosition,optionNumber:u.optionNumber}),v=a(()=>"Disable"===u.soldOutStyle&&u.soldOutMark,[u.soldOutStyle,u.soldOutMark]),y=a(()=>"Line"===u.soldOutStyle&&u.soldOutMark,[u.soldOutStyle,u.soldOutMark]);return e("label",{className:n({"gp-pointer-events-none":v&&!k,"gp-flex gp-items-center":!0}),style:{...h},htmlFor:`${u.uid}-${p}`,children:[t("input",{checked:u.checked,name:`${c?.id}-options-${d?.toString().replaceAll('"','\\"')}`,id:`${u.uid}-${p}`,value:u.value?.label,type:"radio",className:"gp-sr-only",onChange:()=>{if(k||!v){m(d,u.value?.label,c?.id);let e=new CustomEvent("change-selected-option",{bubbles:!0,cancelable:!0,composed:!0,detail:{optionId:d,optionValue:u.value?.label,productId:c?.id}});window.dispatchEvent(e)}}}),t("span",{className:"gp-sr-only",children:u.value?.label}),t(O,{...u,preset:g,isVariantOutStock:v&&!k&&0!==u.optionPosition,soldOutMark:v,soldOutMarkLine:y,available:k})]})};d.defaultProps={};export{d as default};
