"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),MarqueeBase_liquid=require("./MarqueeBase.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),styles=require("../common/styles.js"),classes=require("../common/classes.js");const Marquee=({children:e,style:s,builderAttrs:t,rawChildren:r,advanced:a,...l})=>{let{styles:i,setting:c,builderProps:d}=l,{iconSeparatorColor:o,backgroundColor:n}=i||{},{iconSeparatorSvg:u,isShowIconSeparator:m}=c||{},y=r.length,{isFullWidth:p,getIsFullWidthValue:g}=helpers.useMarqueeLiquidStyles(c,i),{styleHeight:C,styleWidth:q,getWidthForWrapperItem:S,getHeightOfIconSeparatorSize:v,getWidthOfIconSeparatorSize:$,getIconPosition:h,getItemPaddingRightSpacingValue:M,getWidthForItem:f}=styles.getMarqueeStyles({itemSize:y,setting:c,styles:i}),j=()=>({desktop:g("desktop"),tablet:g("tablet"),mobile:g("mobile")}),B=system.createClass(classes.getAlignClasses),F=system.createStyle(styles.getAlignStyles(i)),I=system.createStyle(styles.getContentStyles({style:s,backgroundColor:n,styleWidth:q,styleHeight:C})),b=system.createClass(classes.getContentClasses),k=system.createClass(classes.getWrapperClasses(d?.uid)),w=system.createClass(classes.getFastMarqueeContentClasses),O=system.createClass(classes.getFastMarqueeClasses),R=system.createClass(classes.getFastMarqueeContentChildrenClasses(p)),_=e=>system.createStyle(styles.getFastMarqueeChildrenIconStyles({index:e,itemSize:y,iconSeparatorColor:o,getHeightOfIconSeparatorSize:v,getWidthOfIconSeparatorSize:$,getIconPosition:h})),A=system.createClass(classes.getFastMarqueeChildrenIconClasses),E=e=>system.createStyle({...M(e),"text-wrap":"wrap",...S()}),x=system.createStyle(f()),P=system.createStateOrContext({setting:{...c,uid:d?.uid},styles:i}),L=()=>core.RenderIf(core.isLocalEnv,'<script src="{{ \'gp-marquee-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${core.baseAssetURL}/assets-v2/gp-marquee-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
  ${L()}
  <gp-marquee data-id="${d?.uid}" gp-data='${JSON.stringify(P)}'
   class="${core.cls(d?.uid,a?.cssClass)}">
   <div class="${B}" style="${F}">
      <div class="${b}" style="${I}">
         <div class="${k}">
            <div class="${O}">
               ${MarqueeBase_liquid.default({speed:l.setting?.speed,autoFill:!0,direction:l.setting?.direction,play:(l.setting?.speed??0)>0,pauseOnHover:l.setting?.stopOnHover,isFullWidthResponsive:j(),children:`
               <div class="${w}">
                  ${r?.length?core.WrapRenderChildren({uid:d?.uid??"",customProps:r[0]?.customProps},r.map((e,s)=>{if(e)return core.template`
                  <div class="${R}"
                     style="${E(s)}">
                     ${core.RenderChildren({...e,index:s,itemBorderStyle:i?.itemBorderStyle,itemCorner:i?.itemCorner,itemBackgroundColor:i?.itemBackgroundColor,hasItemShadow:c?.hasItemShadow,itemShadow:i?.itemShadow,itemStyles:x})}
                     ${system.If(!!(m&&u),core.template`<span style="${_(s)}"
                        class="${A}">
                        ${u}
                     </span>`)}
                  </div>
                  `})):e}
               </div>
               `})}
            </div>
         </div>
      </div>
   </div>
</gp-marquee>
`};exports.default=Marquee;
