"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),helpers$1=require("../../helpers.js"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),attrs=require("../common/attrs.js"),helpers=require("../common/helpers.js"),Label_liquid=require("./Label.liquid.js"),SlideHandle_liquid=require("./SlideHandle.liquid.js");const CompareImage=e=>{let{leftImage:t,rightImage:s,advanced:a,builderData:l,pageContext:r,preload:i=!1,onSliderPositionChange:y}=e,{hover:d,styles:m,handle:g,handleSize:c,leftImageAlt:o,leftImageTitle:n,leftImageCss:p,leftImageLabel:S,rightImageAlt:u,rightImageTitle:h,rightImageCss:L,rightImageLabel:b,sliderLineWidth:q,sliderLineColor:$,sliderPositionPercentage:f,vertical:I,componentUid:A,tempImage:C,aspectRatio:j,defaultRatio:_,isHorizontal:v,hasLeftLabel:w,hasRightLabel:N,qualityType:O,qualityPercent:x,getLeftImageSrc:D,getRightImageSrc:H}=helpers.getData(e),P=D({isLiquid:!0}),W=H({isLiquid:!0}),z=system.createStyle({...styles.getOuterWrapperStyles(m)}),E=system.createStyle({...styles.getWrapperWidth({width:m?.width,leftImageWidth:t?.width,rightImageWidth:s?.width})}),k=system.createStyle({...styles.getContainerStyles({aspectRatio:j,builderData:l})}),F=system.createStyle({...styles.getLazyPlaceholderStyle(j)}),G=system.createStyle({...styles.getImageStyles({type:"right",props:e})}),M=system.createStyle({...styles.getImageStyles({type:"left",props:e})}),R=system.createStyle({...styles.getLabelStyles({styles:m,type:"left",isHorizontal:v})}),J=system.createStyle({...styles.getLabelStyles({styles:m,type:"right",isHorizontal:v})}),T=system.createStyle({...styles.getArrowStyles({type:"left"})}),U=system.createStyle({...styles.getArrowStyles({type:"right"})}),V=system.createStyle({...styles.getLineStyles({isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),B=system.createStyle({...styles.getHandleStyles({handleSize:c,isHorizontal:v,sliderLineColor:$,sliderLineWidth:q})}),K=system.createStyle({...styles.getHandleCustomStyles()}),Q=system.createStyle({...styles.getSliderStyles({hover:d,handleSize:c,isHorizontal:v})}),X=system.createClass({...classes.getOuterWrapperClasses(a?.cssClass)}),Y=system.createClass({...classes.getLabelClasses(m)}),Z=system.createClass({...classes.getLabelContainerClasses()}),ee=attrs.getLabelAttrs({componentUid:A,positionId:"left",label:S??""}),et=attrs.getLabelAttrs({componentUid:A,positionId:"right",label:b??""}),es=system.createAttr({...attrs.getImageLiquidAttrs({priority:i,src:W,title:h,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${A}`})}),ea=system.createAttr({...attrs.getImageLiquidAttrs({priority:i,src:P,title:n,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${A}`})}),el=attrs.getLabelLiquidAttrs({pageContext:r,translateLabel:"leftImageLabel"}),er=attrs.getLabelLiquidAttrs({pageContext:r,translateLabel:"rightImageLabel"}),ei=system.createAttr({...attrs.getImagePlaceholderAttrs({width:C?.width,height:C?.height})}),ey=system.createStateOrContext({hover:d,handle:g,vertical:I,leftImage:t,rightImage:s,handleSize:c,aspectRatio:j,defaultRatio:_,componentUid:A,leftImageCss:p,rightImageCss:L,sliderLineColor:$,sliderLineWidth:q,sliderPositionPercentage:f,onSliderPositionChange:y}),ed=()=>core.template`
      <img alt="" ${ei} style="${F}" />
    `,em=()=>NextImage_liquid.default({...es,alt:u,style:G,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!i,isNotLazyload:i,customAttrs:{"data-testid":"right-image"}}),eg=()=>NextImage_liquid.default({...ea,alt:o,style:M,setting:{qualityType:O,qualityPercent:x},enableLazyLoadImage:!i,isNotLazyload:i,customAttrs:{"data-testid":"left-image"}}),ec=()=>SlideHandle_liquid.default({componentUid:A,customHandle:g,lineStyles:V,sliderStyles:Q,handleStyles:B,customHandleStyles:K,leftArrowStyles:T,rightArrowStyles:U}),eo=()=>Label_liquid.default({...ee,...el,styles:m,childrenClass:Y,childrenStyle:R,containerClass:Z,containerStyle:{}}),en=()=>Label_liquid.default({...et,...er,styles:m,childrenClass:Y,childrenStyle:J,containerClass:Z,containerStyle:{}}),ep=()=>`${system.If(core.isLocalEnv,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers$1.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`;return core.template`
    <gp-image-comparison
      data-id="${A}"
      style="${z}"
      class="${X}"
      gp-data='${JSON.stringify(ey)}'
    >
      <div id="img-comparison-wrapper-${A}" style="${E}">
        <div
          id="img-comparison-container-${A}"
          data-testid="container"
          style="${k}"
        >
          ${ed()}
          ${em()}
          ${eg()}
          ${ec()}
          ${system.If(w,eo(),"")}
          ${system.If(N,en(),"")}
        </div>
      </div>
    </gp-image-comparison>
    ${ep()}
  `};exports.default=CompareImage;
