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