'use client';
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),React=require("react"),core=require("@gem-sdk/core"),Row=require("../../grid/components/row/Row.js"),system=require("@gem-sdk/system"),AdaptiveImage=require("../../image/components/AdaptiveImage.js"),HTML5Embed=require("../../video/components/HTML5Embed.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../common/helpers.js"),LiteYouTubeEmbed=require("../../video/components/LiteYouTubeEmbed.js"),helpers$1=require("../../video/common/helpers.js");const HeroBannerItem=e=>{core.useEditorMode();let{setting:s,styles:t,children:l,elementRef:a,transform:r,dataVideo:o,bgRef:i,isShowVideoHtml5:m,layoutResponsive:c}=e,{layout:n,verticalAlign:y,enableParallax:d,alt:u,title:p}=s??{},{background:g,overlayColor:v,verticalGutter:C,sizeSetting:b,contentWidth:h,hoverEffect:j,contentPosition1Col:R,contentPosition2Col:f}=t??{},x=helpers.getAspectRatioSettings(s?.ratioOptions,s?.aspectRatio),S=system.createStyle({...styles.getContainerStyle(t,s)}),I=system.createClass({...classes.getContainerClasses(s,t)}),k=system.createStyle({...styles.getOverlayStyle(t)}),B=system.createClass({...classes.getOverlayClasses(t)}),T=system.createStyle({...styles.getRowStyle(t)}),q=system.createClass({...classes.getRowClasses(t,s)}),w=system.createStyle({...styles.getAdaptiveStyle(t)}),H=system.createClass({...classes.getAdaptivePictureClasses()}),A=system.createClass({...classes.getAdaptiveClasses()}),L=system.createClass({...classes.getBackgroundClasses(j,!1)}),E=system.createStyle({...helpers.getBackgroundImageHeroBanner(g,!1,!0),...styles.getBackgroundStyle(t,d,r)}),N=system.createClass({...classes.getContainBackgroundClasses()}),V=system.createStyle({...styles.getContainBackgroundStyle(t)}),Y=system.createClass({...classes.getHtml5VideoClasses(s?.aspectRatio,!m)}),z=system.createStyle({...styles.getYoutubeIframeStyle(x)}),M=system.createStyle({...styles.getHtml5VideoStyle(x)}),O=system.createClass({...classes.getWrapperYoutubeClasses()}),$=system.createClass({...classes.getIframeYoutubeClasses()}),P=React.useMemo(()=>{if(!helpers.showVideoType(g))return;if(o?.videoType==="html5"&&!o.videoHtml5||o?.videoType==="youtube"&&!o.video)return null;if(o?.type==="video"&&o?.videoType==="html5"&&o?.videoHtml5)return jsxRuntime.jsx(HTML5Embed.default,{muted:!0,loop:o?.loop,controls:!1,autoplay:!0,src:o?.videoHtml5||"",title:"Video",style:M,className:Y});let e=o?.video??"",s=helpers$1.getYoutubeVideoId(e),t=o?.loop?1:0,l=`&loop=${t}&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;if(o?.type==="video"&&o?.videoType==="youtube"&&s&&helpers$1.youtubeVideoRegex.test(e))return jsxRuntime.jsx(LiteYouTubeEmbed.default,{id:s,isHeroBanner:!0,autoplay:!0,title:"Video",controls:!1,params:l,adNetwork:!1,noCookie:!0,muted:!0,lazy:o?.lazyLoad??!0,style:z,wrapperClass:O,iframeClass:$})},[o,g,Y,$,O,z,M]);return jsxRuntime.jsxs("div",{className:I,style:S,children:[jsxRuntime.jsxs("div",{ref:a,"aria-label":"Background Image",role:"banner",className:N,style:V,children:[jsxRuntime.jsx("div",{ref:i,className:L,style:E,children:P}),!!v&&jsxRuntime.jsx("div",{"aria-label":"Overlay",role:"banner",className:B,style:k})]}),jsxRuntime.jsx(Row.default,{className:q,style:T,setting:{layout:n,horizontalAlign:helpers.horizontalAlign(n,R,f),verticalAlign:y},styles:{verticalGutter:C,width:helpers.getWidth(h),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:c?.cols?.length===1,onBlur:e=>helpers.scrollToContentBanner(e),children:core.filterToolbarPreview(l)}),jsxRuntime.jsx(AdaptiveImage.default,{pictureClass:H,srcSet:helpers.getBgImage(g),className:A,aspectRatio:core.getAspectRatioGlobalSize(b),style:w,alt:u,title:p,enableLazyLoadImage:!1,fallbackImg:helpers.fallbackImg})]})};exports.default=HeroBannerItem;
