import{useRenderMode as e,usePageType as t,useInteraction as n}from"@gem-sdk/core";import{useState as o,useRef as r,useMemo as i,useEffect as u}from"react";let s=({props:s,aspectRatio:m})=>{let{styles:v,leftImage:d,rightImage:l,hover:c=!1,vertical:a=!1,sliderLineWidth:p=2,sliderPositionPercentage:g=.5,onSliderPositionChange:w,preload:h}=s,E=!a,{isPreviewSharePageMode:L,isEditMode:f}=e(),R="STATIC"===t(),[b,C]=o(g),[B,O]=o(0),[X,Y]=o(0),[A,I]=o(!1),[N,T]=o(!1),U=r(null),k=r(null),x=r(null),y=r(null),{onListener:z,saveToElementInteractionData:D}=n(),M=r(null),P=i(()=>m,[d,l,v?.aspectRatio,v?.customAspectRadio]);u(()=>{let e=`[data-id="${s?.componentUid}"]`;z({event:"gp:change-ratio-original",selector:e,elementRef:M},e=>{let{data:t,isRollback:n,uniqueStorageKey:o}=e||{};if(!n||void 0!==t){if(n){C(Number(t));return}D(M.current,o,b),C(Number(t)/100)}})},[z,s?.componentUid,D,b]);let S=i(()=>p/2+21,[p]),$=i(()=>(E?B-p/2:X-p/2)-21,[E,B,p,X]);u(()=>{let e=U.current;if(!e)return;let t=new ResizeObserver(([e])=>{let t=e?.target.getBoundingClientRect().width??0;O(t)});return t.observe(e),()=>t.disconnect()},[]),u(()=>{let e=y?.current?.complete;return e&&I(!0),()=>{I(!1)}},[d]),u(()=>{let e=x?.current?.complete;return e&&T(!0),()=>{T(!1)}},[l]);let j=N&&A;return u(()=>{let e=E?g*B:g*X;e<S?C(E?S/B:S/X):e>$?C(E?$/B:$/X):C(g)},[X,B,E,$,S,g]),u(()=>{let e=e=>{let t=e||window.event;if(t.stopPropagation(),t.button&&0!==t.button)return;let n="touches"in t?t?.touches?.[0]?.pageX??0:t.pageX,o="touches"in t?t?.touches?.[0]?.pageY??0:t.pageY,r=n-window.pageXOffset,i=o-window.pageYOffset,u=x.current?.getBoundingClientRect(),s=E?r-(u?.left??0):i-(u?.top??0);s<S&&(s=S),s>$&&(s=$),E?C(s/B):C(s/X),w&&(E?w(s/B):w(s/X))},t=t=>{t.preventDefault(),e(t),t.button&&0!==t.button||(window.addEventListener("mousemove",e),r.addEventListener("touchmove",e))},n=()=>{window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e)},o=U.current,r=k.current;if(j&&o&&r){r.addEventListener("touchstart",t),r.addEventListener("touchend",n),c?(o.addEventListener("mousemove",e),o.addEventListener("mouseleave",n)):(o.addEventListener("mousedown",t),window.addEventListener("mouseup",n));let i=y.current?.getBoundingClientRect(),u=x.current?.getBoundingClientRect(),s=(i?.height??0)/(i?.width??1),m=(u?.height??0)/(u?.width??1),v=B*Math.min(s,m);Y(v)}return()=>{o&&r&&(r.removeEventListener("touchstart",t),r.removeEventListener("touchend",n),o.removeEventListener("mousemove",e),o.removeEventListener("mouseleave",n),o.removeEventListener("mousedown",t),window.removeEventListener("mouseup",n),window.removeEventListener("mousemove",e),r.removeEventListener("touchmove",e))}},[c,$,S,E,P,B,X,j,p,v?.aspectRatio,w]),{ref:M,priority:h||f||L||R,sliderRef:k,containerRef:U,leftImageRef:y,rightImageRef:x,sliderPosition:b,containerWidth:B,containerHeight:X,allImagesLoaded:j,setLeftImgLoaded:I,setRightImgLoaded:T}};export{s as useCompareImage};
