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