import{makeStyleResponsive as e,makeWidth as o,template as t}from"@gem-sdk/core";import{getPPCInlineStyleChoice as r}from"./common/getProductPropertiesChoiceInlineCss.js";import{getDynamicSourceLocales as s,createSettingId as i}from"../../../../helpers.js";import{createClass as m,createStyle as c,createAttr as p}from"@gem-sdk/system";import{getPPCWrapperClasses as l,getPPCLabelClasses as d,getPPCWrapperClassesMain as $}from"./common/getProductPropertiesChoiceClasses.js";import{getPPCContainerStyles as a,getPPCLabelStyles as n,getPPCInputStyles as u}from"./common/getProductPropertiesChoiceStyles.js";import{getPPCInputAttrs as f}from"./common/getProductPropertiesChoiceAttrs.js";import{ProductProperties as P}from"../../../settings/product-properties/configs/translate.js";let ProductPropertyChoice=({setting:y,styles:g,builderProps:h,pageContext:C,attributes:j})=>{let v=h?.uid,{name:b,type:k,childItem:x}=y??{},{valueTextColor:I,fullWidth:_,width:w}=g??{},A=e("w",o(w,_)),S=`properties[${b}]`,q=r(v,I),z=m({...l()}),B=m({...d(g)}),D=c({...a(g)}),E=m({...$()}),F=c({...n(g)}),G=p({...f(j)}),H=c({...u(g)});return t`<div style="${{...A}}" class="${E}">
      <style>${q}</style>

      ${x?.map((e,o)=>{let r=s({val:e,uid:v,settingId:i({id:P?.childItem?.id,index:o}),pageContext:C??{}});return t`
            <div class="${z}" style="${D}">
              <input
                ${{...G}}
                type="${k}"
                id="${v}-${b}-${o}"
                name="${"radio"===k||"checkbox"===k?S:`${S}[]`}"
                value="${r}"
                style="${H}"
                form="{{ product_form_id }}"
              />
              <label
                for="${v}-${b}-${o}"
                class="${B}"
                style="${F}"
              >
                ${r}
              </label>
            </div>`}).join("")}
      </div>
  `};export{ProductPropertyChoice as default};
