import{template as e,getAspectRatioGlobalSize as t,DEVICES as o,getResponsiveValueByScreen as s,hasTranslatedLiquid as i}from"@gem-sdk/core";import l from"../../grid/components/row/Row.liquid.js";import{createStyle as r,createClass as a,If as m}from"@gem-sdk/system";import d from"../../image/components/AdaptiveImage.liquid.js";import n from"../../video/components/HTML5Embed.liquid.js";import{getContainerStyle as p,getOverlayStyle as u,getRowStyle as c,getAdaptiveStyle as f,getBackgroundStyle as v,getContainBackgroundStyle as y,getYoutubeIframeStyle as g,getHtml5VideoStyle as j}from"../common/styles.js";import{getContainerClasses as $,getOverlayClasses as b,getRowClasses as h,getAdaptivePictureClasses as C,getAdaptiveClasses as I,getBackgroundClasses as w,getContainBackgroundClasses as T,getHtml5VideoClasses as k,getWrapperYoutubeClasses as x,getIframeYoutubeClasses as N,getLazyBackgroundClasses as q}from"../common/classes.js";import{getAspectRatio as H,getYoutubeAspectRatio as z,getBackgroundImageHeroBanner as A,horizontalAlign as B,getWidth as L,getBgImage as V,fallbackImg as E,getEnableBgImageByDevice as R,showVideoType as S,getResponsiveSetting as D}from"../common/helpers.js";import{getImageSrc as M}from"../../image/common/helpers.js";import O from"../../image/components/NextImage.liquid.js";import U from"../../video/components/LiteYouTubeEmbed.liquid.js";import{getYoutubeVideoId as W,youtubeVideoRegex as Y}from"../../video/common/helpers.js";import{isRenderHtmlVideo as F}from"../../grid/components/row/common/helpers.js";import{PRIORITY_LOAD_ATTRS as G}from"../../image/constants.js";import{getSeoTranslated as J}from"../../helpers.js";let HeroBannerItem=K=>{let{enableLazyLoadImage:P=!0,translatedBackground:Q,setting:X,styles:Z,children:_,builderProps:ee,rawChildren:et,pageContext:eo}=K,{layout:es,verticalAlign:ei,enableParallax:el,alt:er,title:ea,preload:em,isYoutubeVideoMigrated:ed}=X??{},{background:en,overlayColor:ep,verticalGutter:eu,sizeSetting:ec,contentWidth:ef,hoverEffect:ev,contentPosition1Col:ey,contentPosition2Col:eg,videoObjectFit:ej}=Z??{},e$=!em&&P,eb=H(ec,en),eh=z(en,ej,eb),eC=D(Q||{}),eI=eC.desktop,ew=r({...p(Z)}),eT=a({...$(X,Z)}),ek=r({...u(Z)}),ex=a({...b(Z)}),eN=r({...c(Z)}),eq=a({...h(Z,X)}),eH=r({...f(Z)}),ez=a({...C()}),eA=a({...I()}),eB=a({...w(ev,e$)}),eL=r({...A(Q,e$,!1),...v(Z,el,"")}),eV=a({...T()}),eE=r({...y(Z)}),eR=a({...k(!1)}),eS=r({...g(eh,ej)}),eD=a({...x(ed)}),eM=r({...j(eb,ej,en)}),eO=a({...N()}),eU=e=>a({...q(e)}),eW=()=>{if(!em)return o.map(e=>m(R(e,Q),O({src:M(s(V(Q),e),e),alt:J({valueTranslate:er,uid:ee?.uid,settingId:"alt",pageContext:eo??{}}),title:J({valueTranslate:ea,uid:ee?.uid,settingId:"title",pageContext:eo??{}}),className:eU(e),isDisableAspectStyle:!0,enableLazyLoadImage:P}))).join("")},eY=()=>{if(!S(en))return;if(F(en))return n({uid:ee?.uid,muted:!0,loop:eI?.loop,controls:!1,autoplay:!0,src:eI?.videoHtml5||"",title:"Video",style:eM,className:eR});let e=eI?.video??"",t=W(e),o=`&loop=false&playlist=${t}&showinfo=0&rel=0&fs=0&enablejsapi=1`,s=i(e);if(eI?.type==="video"&&eI?.videoType==="youtube"&&t&&Y.test(e)||s)return U({uid:ee?.uid,id:t??"",translatedVideoUrl:s?e:"",isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:o,adNetwork:!1,noCookie:!0,muted:!0,lazy:eI?.lazyLoad??!0,preload:!0,style:eS,wrapperClass:eD,iframeClass:eO})};return e`
  <div class="${eT}" style="${ew}">
      <div
        class="${eV}"
        style="${eE}"
      >
        <div class="${eB}" style="${eL}">
          ${eW()}
          ${eY()}
        </div>
        ${m(!!ep,e`<div aria-label="Overlay" class="${ex}" style="${ek}"> </div>`)}
      </div>
      ${l({className:eq,style:eN,setting:{layout:es,horizontalAlign:B(es,ey,eg),verticalAlign:ei},styles:{verticalGutter:eu,width:L(ef),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},children:_,rawChildren:et})}
        ${d({pictureClass:ez,srcSet:V(Q),className:eA,...em&&G,aspectRatio:t(ec),style:eH,alt:J({valueTranslate:er,uid:ee?.uid,settingId:"alt",pageContext:eo??{}}),title:J({valueTranslate:ea,uid:ee?.uid,settingId:"title",pageContext:eo??{}}),enableLazyLoadImage:P,fallbackImg:E})}
  </div>
`};export{HeroBannerItem as default};
