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