"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),_function=require("../../../../helpers/function.js"),classes=require("../../common/base/classes.js"),system=require("@gem-sdk/system"),attrs=require("../../common/base/attrs.js"),styles=require("../../common/base/styles.js");const BaseVariant=e=>{let{optionTypography:s,optionBorder:t,optionRounded:l,optionTypo:r,typeOfOption:a}=e,c="color"===a,i="image"===a||"image_shopify"===a,o=system.createClass(classes.getColorClass({})),y=()=>core.template`
      ${system.LiquidFor("color in colors",`
          ${system.Liquid('{% assign backgroundType = "background-color" %}')}
          ${system.LiquidIf('color contains "linear-gradient"',system.Liquid('{% assign backgroundType = "background-image" %}'))}
          <div
            class="${o}"
            data-test="{{ backgroundType }}: {{ color }}"
            style="{{ backgroundType }}: {{ color }}; ${u()}"></div>
        `)}
      `,n=system.createStyle(styles.getColorStyle({optionBorder:t,optionRounded:l,isActive:!0})),m=system.createStyle(styles.getColorStyle({optionBorder:t,optionRounded:l,isActive:!1})),u=()=>system.LiquidIf("selectedValue == value",_function.getStyleOfObject(n),_function.getStyleOfObject(m)),g=system.createClass(classes.getWrapperTextClass(i,c)),d=system.createStyle({...styles.getWrapperTextStyle(e)}),p=system.createClass(classes.getTextClass({optionTypo:r,optionTypography:s,isColorType:c,isUploadImageType:i})),C=system.createStyle(styles.getTextStyle({optionTypo:r,optionTypography:s})),f=()=>core.template`
      <div
        class="${g}"
        style="${c?u():""} ${_function.getStyleOfObject(d)}">
        ${system.If(i,'<svg width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="2" fill="#D6D6D6"></circle><path d="M0.196854 10.6453L2.40968 8.05946C2.4846 7.97175 2.57719 7.9008 2.68141 7.85124C2.78562 7.80168 2.89913 7.77461 3.01452 7.77181C3.12991 7.76902 3.2446 7.79055 3.3511 7.835C3.45761 7.87945 3.55353 7.94583 3.63262 8.02981L4.66733 9.12714L8.71205 4.29464C8.79123 4.19995 8.89077 4.1243 9.00325 4.07333C9.11573 4.02236 9.23827 3.99737 9.36176 4.00022C9.48524 4.00307 9.6065 4.03369 9.71651 4.08979C9.82651 4.1459 9.92245 4.22605 9.99717 4.32429L14.8329 10.6772C14.9254 10.7989 14.982 10.9441 14.9964 11.0962C15.0107 11.2484 14.9823 11.4016 14.9144 11.5385C14.8464 11.6754 14.7415 11.7907 14.6115 11.8713C14.4815 11.952 14.3316 11.9948 14.1786 11.995L0.822048 12C0.664945 11.9999 0.511148 11.9549 0.378853 11.8703C0.246557 11.7857 0.141299 11.6649 0.0755311 11.5224C0.00976323 11.3799 -0.013762 11.2216 0.00773837 11.0661C0.0292388 10.9107 0.0948652 10.7646 0.196854 10.6453Z" fill="#D6D6D6"></path></svg>'," ")}
        <span class="${p}" style="${C}">{{value}}</span>
      </div>
    `,v=()=>core.template`
      <img class="gp-object-cover gp-rounded-none" style="width: 64px; height: 64px" src="{{imageUrl}}" alt="" />
    `,b=()=>{switch(a){case"color":return core.template`${system.LiquidIf("colors != null and colors.size > 0",y(),f())}`;case"image":case"image_shopify":return core.template`${system.LiquidIf('imageUrl != null and imageUrl != ""',v(),f())}`;default:return f()}},S=system.createClass(classes.getWrapperClass({...e,available:!0})),$=system.createAttr(attrs.getWrapperAttr(e,"Liquid")),q=system.createStyle(styles.getWrapperStyleActive(e)),L=system.createStyle(styles.getWrapperStyleNormalAndHover(e));return core.template`
    <div
      ${$}
      class="${S}"
      style="${system.LiquidIf("selectedValue == value",_function.getStyleOfObject({...q,...n}),_function.getStyleOfObject({...L,...m}))}">
      ${b()}
    </div>`};exports.default=BaseVariant;
