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