import{useEditorMode as e}from"@gem-sdk/core";import{useState as t,useRef as r,useCallback as n,useEffect as u,useMemo as i}from"react";let useMarqueeBase=(o,a)=>{let{style:c={},autoFill:d=!1,play:s=!0,pauseOnHover:l=!1,pauseOnClick:h=!1,direction:m="left",speed:p=50,delay:g=0,loop:w=0,onMount:f,children:v,isFullWidth:y}=o??{},B=e(),[M,T]=t(0),[$,b]=t(0),[x,R]=t(1),[k,q]=t(!1),C=r(null),z=a||C,L=r(null),O=r(null),W=n(()=>{if(L.current&&z.current){let e=z.current.getBoundingClientRect(),t=L.current.getBoundingClientRect(),r=e.width,n=t.width;n<40||(y?(n=r,L.current.style.width=`${n}px`):L.current.style.width="auto",("up"===m||"down"===m)&&(r=e.height,n=t.height),d&&r&&n?R(Math.min(60,n<r?Math.ceil(r/n)+1:1)):R(2),T(r),b(n))}},[d,z,m,y,v]);u(()=>{if(k&&L.current&&z.current){let e=new ResizeObserver(()=>{O.current&&clearTimeout(O.current),O.current=setTimeout(()=>{W()},600)});return e.observe(L.current),e.observe(z.current),()=>{e&&e.disconnect()}}},[W,z,k]),u(()=>{"edit"===B&&(O.current=setTimeout(()=>{W()},500))},[v,W,B]),u(()=>(q(!0),()=>{O.current&&clearTimeout(O.current)}),[]),u(()=>{"function"==typeof f&&f()},[f]);let j=i(()=>d?$*x/p:$<M?M/p:$/p,[d,M,$,x,p]),A=i(()=>({...c,marginLeft:"1px","--pause-on-hover":!s||l?"paused":"running","--pause-on-click":!s||l&&!h||h?"paused":"running","--width":"up"===m||"down"===m?"100vh":"100%","--transform":"up"===m?"rotate(-90deg)":"down"===m?"rotate(90deg)":"none"}),[c,s,l,h,m]),D=i(()=>({"--play":s?"running":"paused","--direction":"left"===m?"normal":"reverse","--duration":`${j}s`,"--delay":`${g}s`,"--iteration-count":w?`${w}`:"infinite","--min-width":d?"auto":"100%",width:y?"100%":"auto"}),[s,m,j,g,w,d,y]),E=i(()=>({"--transform":"up"===m?"rotate(90deg)":"down"===m?"rotate(-90deg)":"none",width:y?"100%":"auto",minWidth:y?"100%":"unset"}),[m,y]);return{containerStyle:A,marqueeStyle:D,childStyle:E,marqueeRef:L,containerRef:z,calculateWidth:W,multiplier:x}};export{useMarqueeBase};
