'use client';
import{jsx as t,jsxs as e}from"react/jsx-runtime";import{createStyleReact as i,createClass as r,createAttr as l,If as s}from"@gem-sdk/system";import"react";import{getOuterWrapperStyles as o,getWrapperWidth as a,getContainerStyles as m,getLazyPlaceholderStyle as d,getImageStyles as h,getLabelStyles as n,getArrowStyles as c,getLineStyles as g,getHandleStyles as p,getHandleCustomStyles as y,getSliderStyles as f}from"../common/styles.js";import{getImageReactAttrs as w,getImagePlaceholderAttrs as C,getLabelAttrs as S}from"../common/attrs.js";import{getOuterWrapperClasses as I,getLabelClasses as j,getLabelContainerClasses as u}from"../common/classes.js";import b from"./Label.js";import L from"./SlideHandle.js";import{getData as v,getReactStyles as H}from"../common/helpers.js";import{useCompareImage as k}from"../hooks/useCompareImage.js";let x=x=>{let{leftImage:A,rightImage:W,builderData:$,advanced:N}=x,{hover:P,styles:R,handle:U,handleSize:q,leftImageAlt:z,leftImageTitle:B,leftImageLabel:D,rightImageAlt:E,rightImageTitle:F,rightImageLabel:G,sliderLineWidth:J,sliderLineColor:K,componentUid:M,tempImage:O,aspectRatio:Q,isHorizontal:T,hasLeftLabel:V,hasRightLabel:X,getLeftImageSrc:Y,getRightImageSrc:Z}=v(x),_=Y(),tt=Z(),{ref:te,priority:ti,sliderRef:tr,containerRef:tl,leftImageRef:ts,rightImageRef:to,sliderPosition:ta,containerWidth:tm,containerHeight:td,allImagesLoaded:th,setLeftImgLoaded:tn,setRightImgLoaded:tc}=k({props:x,aspectRatio:Q}),tg=H({handleSize:q,isHorizontal:T,containerWidth:tm,containerHeight:td,sliderPosition:ta}),tp=i({...o(R)}),ty=i({...a({width:R?.width,leftImageWidth:A?.width,rightImageWidth:W?.width})}),tf=i({...m({aspectRatio:Q,builderData:$,allImagesLoaded:th})}),tw=i({...d(Q)}),tC=i({...h({type:"right",props:x}),...tg.rightImageClip}),tS=i({...h({type:"left",props:x}),...tg.leftImageClip}),tI=i({...n({styles:R,type:"left",isHorizontal:T})}),tj=i({...n({styles:R,type:"right",isHorizontal:T})}),tu=i({...c({type:"left"})}),tb=i({...c({type:"right"})}),tL=i({...g({isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tv=i({...p({handleSize:q,isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tH=i({...y()}),tk=i({...f({hover:P,handleSize:q,isHorizontal:T}),...tg.sliderPosition}),tx=r({...I(N?.cssClass)}),tA=r({...j(R)}),tW=r({...u()}),t$=l({...w({testId:"right-image",src:tt,title:F,width:W?.width,height:W?.height,priority:ti})}),tN=l({...w({testId:"left-image",src:_,title:B,width:A?.width,height:A?.height,priority:ti})}),tP=S({componentUid:M,positionId:"left",label:D??""}),tR=S({componentUid:M,positionId:"right",label:G??""}),tU=l({...C({width:O?.width,height:O?.height})});return t("div",{"data-id":M,className:tx,style:tp,children:t("div",{id:`img-comparison-wrapper-${M}`,style:ty,ref:te,children:e("div",{id:`img-comparison-container-${M}`,ref:tl,"data-testid":"container",style:tf,children:[t("img",{alt:"",...tU,style:tw}),t("img",{alt:E,ref:to,...t$,style:tC,onLoad:()=>tc(!0)}),t("img",{alt:z,ref:ts,...tN,style:tS,onLoad:()=>tn(!0)}),t(L,{customHandle:U,componentUid:M,lineStyles:tL,sliderStyles:tk,handleStyles:tv,customHandleStyles:tH,leftArrowStyles:tu,rightArrowStyles:tb,sliderRef:tr}),s(V,t(b,{...tP,styles:R,childrenClass:tA,childrenStyle:tI,containerClass:tW,containerStyle:tg?.leftLabelContainer??{}})),s(X,t(b,{...tR,styles:R,childrenClass:tA,childrenStyle:tj,containerClass:tW,containerStyle:tg?.rightLabelContainer??{}}))]})})})};export{x as default};
