'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 g,getLineStyles as p,getHandleStyles as c,getHandleCustomStyles as y,getSliderStyles as f}from"../common/styles.js";import{getImageReactAttrs as w,getImagePlaceholderAttrs as C,getLabelAttrs as I}from"../common/attrs.js";import{getOuterWrapperClasses as S,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 CompareImage=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:tg}=k({props:x,aspectRatio:Q}),tp=H({handleSize:q,isHorizontal:T,containerWidth:tm,containerHeight:td,sliderPosition:ta}),tc=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}),...tp.rightImageClip}),tI=i({...h({type:"left",props:x}),...tp.leftImageClip}),tS=i({...n({styles:R,type:"left",isHorizontal:T})}),tj=i({...n({styles:R,type:"right",isHorizontal:T})}),tu=i({...g({type:"left"})}),tb=i({...g({type:"right"})}),tL=i({...p({isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tv=i({...c({handleSize:q,isHorizontal:T,sliderLineColor:K,sliderLineWidth:J})}),tH=i({...y()}),tk=i({...f({hover:P,handleSize:q,isHorizontal:T}),...tp.sliderPosition}),tx=r({...S(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=I({componentUid:M,positionId:"left",label:D??""}),tR=I({componentUid:M,positionId:"right",label:G??""}),tU=l({...C({width:O?.width,height:O?.height})}),tq=()=>t("img",{alt:"",...tU,style:tw}),tz=()=>t("img",{alt:E,ref:to,...t$,style:tC,onLoad:()=>tg(!0)}),tB=()=>t("img",{alt:z,ref:ts,...tN,style:tI,onLoad:()=>tn(!0)}),tD=()=>t(L,{customHandle:U,componentUid:M,lineStyles:tL,sliderStyles:tk,handleStyles:tv,customHandleStyles:tH,leftArrowStyles:tu,rightArrowStyles:tb,sliderRef:tr}),tE=()=>t(b,{...tP,styles:R,childrenClass:tA,childrenStyle:tS,containerClass:tW,containerStyle:tp?.leftLabelContainer??{}}),tF=()=>t(b,{...tR,styles:R,childrenClass:tA,childrenStyle:tj,containerClass:tW,containerStyle:tp?.rightLabelContainer??{}});return t("div",{"data-id":M,className:tx,style:tc,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:[tq(),tz(),tB(),tD(),s(V,tE()),s(X,tF())]})})})};export{CompareImage as default};
