'use client';
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@gem-sdk/system");require("react");var a=require("../common/styles.js"),l=require("../common/attrs.js"),r=require("../common/classes.js"),s=require("./Label.js"),i=require("./SlideHandle.js"),c=require("../common/helpers.js"),y=require("../hooks/useCompareImage.js");exports.default=g=>{let{leftImage:d,rightImage:n,builderData:o,advanced:h}=g,{hover:S,styles:m,handle:p,handleSize:u,leftImageAlt:f,leftImageTitle:C,leftImageLabel:j,rightImageAlt:R,rightImageTitle:I,rightImageLabel:w,sliderLineWidth:L,sliderLineColor:b,componentUid:x,tempImage:A,aspectRatio:q,isHorizontal:v,hasLeftLabel:W,hasRightLabel:H,getLeftImageSrc:P,getRightImageSrc:O}=c.getData(g),k=P(),$=O(),{ref:_,priority:z,sliderRef:D,containerRef:M,leftImageRef:N,rightImageRef:U,sliderPosition:B,containerWidth:E,containerHeight:F,allImagesLoaded:G,setLeftImgLoaded:J,setRightImgLoaded:K}=y.useCompareImage({props:g,aspectRatio:q}),Q=c.getReactStyles({handleSize:u,isHorizontal:v,containerWidth:E,containerHeight:F,sliderPosition:B}),T=t.createStyleReact({...a.getOuterWrapperStyles(m)}),V=t.createStyleReact({...a.getWrapperWidth({width:m?.width,leftImageWidth:d?.width,rightImageWidth:n?.width})}),X=t.createStyleReact({...a.getContainerStyles({aspectRatio:q,builderData:o,allImagesLoaded:G})}),Y=t.createStyleReact({...a.getLazyPlaceholderStyle(q)}),Z=t.createStyleReact({...a.getImageStyles({type:"right",props:g}),...Q.rightImageClip}),ee=t.createStyleReact({...a.getImageStyles({type:"left",props:g}),...Q.leftImageClip}),et=t.createStyleReact({...a.getLabelStyles({styles:m,type:"left",isHorizontal:v})}),ea=t.createStyleReact({...a.getLabelStyles({styles:m,type:"right",isHorizontal:v})}),el=t.createStyleReact({...a.getArrowStyles({type:"left"})}),er=t.createStyleReact({...a.getArrowStyles({type:"right"})}),es=t.createStyleReact({...a.getLineStyles({isHorizontal:v,sliderLineColor:b,sliderLineWidth:L})}),ei=t.createStyleReact({...a.getHandleStyles({handleSize:u,isHorizontal:v,sliderLineColor:b,sliderLineWidth:L})}),ec=t.createStyleReact({...a.getHandleCustomStyles()}),ey=t.createStyleReact({...a.getSliderStyles({hover:S,handleSize:u,isHorizontal:v}),...Q.sliderPosition}),eg=t.createClass({...r.getOuterWrapperClasses(h?.cssClass)}),ed=t.createClass({...r.getLabelClasses(m)}),en=t.createClass({...r.getLabelContainerClasses()}),eo=t.createAttr({...l.getImageReactAttrs({testId:"right-image",src:$,title:I,width:n?.width,height:n?.height,priority:z})}),eh=t.createAttr({...l.getImageReactAttrs({testId:"left-image",src:k,title:C,width:d?.width,height:d?.height,priority:z})}),eS=l.getLabelAttrs({componentUid:x,positionId:"left",label:j??""}),em=l.getLabelAttrs({componentUid:x,positionId:"right",label:w??""}),ep=t.createAttr({...l.getImagePlaceholderAttrs({width:A?.width,height:A?.height})});return e.jsx("div",{"data-id":x,className:eg,style:T,children:e.jsx("div",{id:`img-comparison-wrapper-${x}`,style:V,ref:_,children:e.jsxs("div",{id:`img-comparison-container-${x}`,ref:M,"data-testid":"container",style:X,children:[e.jsx("img",{alt:"",...ep,style:Y}),e.jsx("img",{alt:R,ref:U,...eo,style:Z,onLoad:()=>K(!0)}),e.jsx("img",{alt:f,ref:N,...eh,style:ee,onLoad:()=>J(!0)}),e.jsx(i.default,{customHandle:p,componentUid:x,lineStyles:es,sliderStyles:ey,handleStyles:ei,customHandleStyles:ec,leftArrowStyles:el,rightArrowStyles:er,sliderRef:D}),t.If(W,e.jsx(s.default,{...eS,styles:m,childrenClass:ed,childrenStyle:et,containerClass:en,containerStyle:Q?.leftLabelContainer??{}})),t.If(H,e.jsx(s.default,{...em,styles:m,childrenClass:ed,childrenStyle:ea,containerClass:en,containerStyle:Q?.rightLabelContainer??{}}))]})})})};
