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