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