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