import{template as t,isLocalEnv as i,baseAssetURL as e}from"@gem-sdk/core";import{createStyle as s,createClass as a,createAttr as r,createStateOrContext as l,If as o}from"@gem-sdk/system";import{getSettingPreloadData as m}from"../../helpers.js";import d from"../../image/components/NextImage.liquid.js";import{getOuterWrapperStyles as p,getWrapperWidth as c,getContainerStyles as g,getLazyPlaceholderStyle as n,getImageStyles as h,getLabelStyles as y,getArrowStyles as f,getLineStyles as $,getHandleStyles as b,getHandleCustomStyles as S,getSliderStyles as j}from"../common/styles.js";import{getOuterWrapperClasses as u,getLabelClasses as I,getLabelContainerClasses as L}from"../common/classes.js";import{getImageLiquidAttrs as v,getImagePlaceholderAttrs as w,getLabelLiquidAttrs as A,getLabelAttrs as C}from"../common/attrs.js";import{getData as q}from"../common/helpers.js";import N from"./Label.liquid.js";import k from"./SlideHandle.liquid.js";let D=D=>{let{leftImage:E,rightImage:O,advanced:x,builderData:z,pageContext:F,preload:G=!1,onSliderPositionChange:H}=D,{hover:W,styles:_,handle:J,handleSize:M,leftImageAlt:P,leftImageTitle:R,leftImageCss:T,leftImageLabel:V,rightImageAlt:B,rightImageTitle:K,rightImageCss:Q,rightImageLabel:U,sliderLineWidth:X,sliderLineColor:Y,sliderPositionPercentage:Z,vertical:tt,componentUid:ti,tempImage:te,aspectRatio:ts,defaultRatio:ta,isHorizontal:tr,hasLeftLabel:tl,hasRightLabel:to,qualityType:tm,qualityPercent:td,getLeftImageSrc:tp,getRightImageSrc:tc}=q(D),tg=tp({isLiquid:!0}),tn=tc({isLiquid:!0}),th=s({...p(_)}),ty=s({...c({width:_?.width,leftImageWidth:E?.width,rightImageWidth:O?.width})}),tf=s({...g({aspectRatio:ts,builderData:z})}),t$=s({...n(ts)}),tb=s({...h({type:"right",props:D})}),tS=s({...h({type:"left",props:D})}),tj=s({...y({styles:_,type:"left",isHorizontal:tr})}),tu=s({...y({styles:_,type:"right",isHorizontal:tr})}),tI=s({...f({type:"left"})}),tL=s({...f({type:"right"})}),tv=s({...$({isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tw=s({...b({handleSize:M,isHorizontal:tr,sliderLineColor:Y,sliderLineWidth:X})}),tA=s({...S()}),tC=s({...j({hover:W,handleSize:M,isHorizontal:tr})}),tq=a({...u(x?.cssClass)}),tN=a({...I(_)}),tk=a({...L()}),tD=C({componentUid:ti,positionId:"left",label:V??""}),tE=C({componentUid:ti,positionId:"right",label:U??""}),tO=r({...v({priority:G,src:tn,title:K,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`right-image-${ti}`})}),tx=r({...v({priority:G,src:tg,title:R,isDisableObjectFit:!0,isDisableAspectStyle:!0,id:`left-image-${ti}`})}),tz=A({pageContext:F,translateLabel:"leftImageLabel"}),tF=A({pageContext:F,translateLabel:"rightImageLabel"}),tG=r({...w({width:te?.width,height:te?.height})}),tH=l({hover:W,handle:J,vertical:tt,leftImage:E,rightImage:O,handleSize:M,aspectRatio:ts,defaultRatio:ta,componentUid:ti,leftImageCss:T,rightImageCss:Q,sliderLineColor:Y,sliderLineWidth:X,sliderPositionPercentage:Z,onSliderPositionChange:H});return t`
    <gp-image-comparison
      data-id="${ti}"
      style="${th}"
      class="${tq}"
      gp-data='${JSON.stringify(tH)}'
    >
      <div id="img-comparison-wrapper-${ti}" style="${ty}">
        <div
          id="img-comparison-container-${ti}"
          data-testid="container"
          style="${tf}"
        >
          ${t`
      <img alt="" ${tG} style="${t$}" />
    `}
          ${d({...tO,alt:B,style:tb,setting:{qualityType:tm,qualityPercent:td},pageContext:F,isNotLazyload:G,customAttrs:{"data-testid":"right-image"}})}
          ${d({...tx,alt:P,style:tS,setting:{qualityType:tm,qualityPercent:td},pageContext:F,isNotLazyload:G,customAttrs:{"data-testid":"left-image"}})}
          ${k({componentUid:ti,customHandle:J,lineStyles:tv,sliderStyles:tC,handleStyles:tw,customHandleStyles:tA,leftArrowStyles:tI,rightArrowStyles:tL})}
          ${o(tl,N({...tD,...tz,styles:_,childrenClass:tN,childrenStyle:tj,containerClass:tk,containerStyle:{}}),"")}
          ${o(to,N({...tE,...tF,styles:_,childrenClass:tN,childrenStyle:tu,containerClass:tk,containerStyle:{}}),"")}
        </div>
      </div>
    </gp-image-comparison>
    ${`${o(i,`<script ${m('class="gps-link" delay',"src")}="{{ 'gp-image-comparison-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${m('class="gps-link" delay',"src")}="${e}/assets-v2/gp-image-comparison-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}`}
  `};export{D as default};
