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