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