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