'use client';
import{jsx as o,jsxs as t}from"react/jsx-runtime";import{useI18nStore as e,useVariants as n,OptionSpecialStyle as r,DEVICES as i,getResponsiveValueByScreen as a}from"@gem-sdk/core";import s from"../../../text/components/Text.js";import m from"./components/variants/index.js";import p from"./components/dropdown-swatches/Dropdown.js";import l from"./components/dropdown-group/DropdownGroup.js";import c from"../../../common/components/NoDataState.js";import{createClass as d,createAttr as u,createStyle as f,If as h}from"@gem-sdk/system";import{getWrapperStyle as y,getVariantOptionGroupStyle as g}from"./common/main/styles.js";import{getAttrs as v}from"./common/main/getAttr.js";import{getWrapDropdownClass as j,getVariantOptionGroupClass as w}from"./common/main/classes.js";import{getDropdownGroupData as x,getTextVariantTitleData as N}from"./common/main/getData.js";import{useGpVariants as b}from"./hooks/useGpVariants.js";import{getWrapVariantOptionClass as k}from"./common/variants/classes.js";import{getMarginBottomStyle as T}from"./common/variants/styles.js";let ProductVariants=A=>{let{t:P}=e(),{builderProps:V,styles:D,setting:$}=A,{align:S,optionTypo:C,swatchItemWidth:E,dropdownItemWidth:G,swatchSpacing:O,marginBottom:W}=D??{},{label:_,showAsSwatches:z,layout:K,hasPreSelected:R}=$??{},{uid:q}=V??{},B=n(),{mode:F,options:H,variantId:I,elementRef:J,variantGroup:L,isChangeVariant:M,selectedOptions:Q,isDefaultVariant:U,getVariantConfiguration:X,redirectProductShopifyLink:Y}=b(A,B),Z=()=>{let o={};return i.forEach(t=>{let e=a(E,t);o[t]="auto"===e}),o},oo=()=>{let o={};return i.forEach(t=>{o[t]=G?.[t]==="fill"}),o},ot=()=>{let e=H?.filter(o=>{let t=X(o.name);return!t?.hide});return e?.map((n,i)=>{let a=X(n.name),l=a?a.optionType:n.optionType,c=a?a.presets[a.optionType||"rectangle_list"]?.spacing:O,u=(R||I)&&n.name?Q?.[n.name]:void 0,y=d(w(S)),v=f(g(O,c)),j=N(A,"React",{optionName:n.name,hasPreSelected:R,selectedOptions:Q,styleOptionSelected:l}),x=d(k(K,S)),b=i===e.length-1;return t("div",{className:x,style:f(T(W,b)),children:[h(_,o(s,{...j})),t("div",{className:y,style:v,children:[z&&r.includes(`${l}`)&&n.values.map(t=>{let e=(!!R||!!M||!!I)&&!!n.name&&Q?.[n.name]===t.label;return o(m,{variantKey:`${n.id}-${t.id}`,showAsSwatches:z,uid:q,optionName:n.name??"",optionValue:t.label??"",name:n.name,value:t,optionNumber:H.length,optionPosition:i,...D,...$,presetConfiguration:X(n.name),checked:e,typeOfOption:l||"dropdown",swatchAutoWidth:Z(),optionTypo:C},t.id)}),h(("dropdown"===l||z&&!r.includes(`${l}`))&&"radio_buttons"!==l,o(p,{...D,...$,variants:B,option:n,initValue:u,presetConfiguration:X(n.name),swatchAutoWidth:oo(),optionTypo:C,optionPosition:i,optionNumber:H.length}))]})]},n.id)})},oe=d(j(S)),on=x(A),or=()=>o("div",{className:oe,children:o(l,{...on})});if(U&&"edit"===F)return o(c,{elementType:"secondary",description:P("Setup options like colors, sizes with product variant."),descriptionActions:[{text:P("Add new variant"),callback:Y},{text:P("sync data"),callback:"syncProduct"}]});if(U)return;let oi=u(v({uid:q,hasPreSelected:R})),oa=f(y(A)),os=d({"gp-flex gp-flex-col !gp-ml-0":!0});return o("div",{ref:J,...oi,className:os,style:oa,children:h(L,or(),ot())})};export{ProductVariants as default};
