'use client';
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{filterToolbarPreview as s,cls as t,isEmptyChildren as i}from"@gem-sdk/core";import{useMemo as o,Children as m,isValidElement as a}from"react";import{useMarqueeStyles as l}from"../hooks/useMarqueeStyles.js";import{useMarqueeScrollToItem as d}from"../hooks/useMarqueeScrollToItem.js";import c from"./MarqueeBase.js";import{useMarquee as n}from"../hooks/useMarquee.js";import{createClass as u,createStyle as h,If as p}from"@gem-sdk/system";import{getAlignClasses as v,getContentClasses as y,getWrapperClasses as f,getFastMarqueeClasses as S,getFastMarqueeContentClasses as N,getFastMarqueeContentChildrenClasses as w,getFastMarqueeChildrenIconClasses as I}from"../common/classes.js";import{getMarqueeStyles as k,getAlignStyles as j,getContentStyles as q,getFastMarqueeChildrenIconStyles as M}from"../common/styles.js";let Marquee=({children:g,style:B,builderAttrs:C,advanced:x,...H})=>{let{styles:T,setting:F,builderProps:P}=H,{iconSeparatorSvg:_,isShowIconSeparator:A,stopOnHover:L,speed:O}=F||{},{backgroundColor:W,iconSeparatorColor:b}=T||{},z=o(()=>m.count(s(g)),[g]),{isFullWidth:D}=l({setting:F,styles:T,itemSize:z}),{styleHeight:E,styleWidth:G,getWidthForWrapperItem:J,getHeightOfIconSeparatorSize:K,getWidthOfIconSeparatorSize:Q,getIconPosition:R,getItemPaddingRightSpacingValue:U,getWidthForItem:V}=k({setting:F,styles:T,itemSize:z}),{rate:X,wrapperElement:Y,scrollTime:Z,hoverItem:$,setHoverItem:ee,setActiveItem:er,activeItem:es,direction:et,isPause:ei,scrollToItemClass:eo}=d({children:g,style:B,builderAttrs:C,...H}),{isPlay:em,rateUse:ea}=n({children:g,isPause:ei,isPreview:P?.isPreview,rate:X,speed:O}),el=u(v),ed=h(j(T)),ec=h(q({style:B,backgroundColor:W,styleWidth:G,styleHeight:E})),en=u(y),eu=u(f(P?.uid)),eh=u(S),ep=u(N),ev=u(w(D)),ey=e=>h(M({index:e,itemSize:z,iconSeparatorColor:b,getHeightOfIconSeparatorSize:K,getWidthOfIconSeparatorSize:Q,getIconPosition:R})),ef=u(I),eS=e=>h({...U(e),"text-wrap":"wrap",...J()}),eN=h(V());return e("div",{"data-id":P?.uid,className:t(P?.uid,x?.cssClass),children:e("div",{className:el,style:ed,children:r("div",{"data-id":P?.uid,className:en,style:ec,...C,children:[e("div",{className:eu,ref:Y,children:e("div",{className:eh,children:e(c,{autoFill:!0,play:em,speed:ea,isFullWidth:D,pauseOnHover:L,direction:et,uniqueId:P?.uid,style:{...G,width:"100%"},children:e("div",{className:ep,children:i(g)?e("div",{children:"No Slider"}):m.map(s(g),(s,t)=>a(s)?r("div",{className:ev,style:eS(t),children:[e(s.type,{...s.props,index:t,activeItem:es,hoverItem:$,timeToScroll:Z,setHoverItem:ee,setActiveItem:er,className:eo(t),itemBorderStyle:T?.itemBorderStyle,itemCorner:T?.itemCorner,itemBackgroundColor:T?.itemBackgroundColor,hasItemShadow:F?.hasItemShadow,itemShadow:T?.itemShadow,itemStyle:eN}),p(!!(A&&_),e("span",{style:ey(t),className:ef,dangerouslySetInnerHTML:{__html:_??""}}))]},s.key):null)})})})}),s(g,!0)]})})})};export{Marquee as default};
