'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 u,getAdaptiveStyle as y,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 V,getIframeYoutubeClasses as B}from"../common/classes.js";import{getBackgroundImageHeroBanner as I,showVideoType as M,scrollToContentBanner as Y,getWidth as z,horizontalAlign as E,fallbackImg as L,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)}),eu=a({...g(q,D)}),ey=m({...c(D)}),ef=a({...j(D)}),ev=m({...u(D)}),eh=a({...N(D,q)}),eb=m({...y(D)}),eg=a({...T()}),ej=a({...k()}),eN=a({...H(ea,!1)}),eT=m({...I(es,!1,!0),...f(D,ee,J)}),ek=a({...w()}),eH=m({...v(D)}),ew=a({...C(!Q)}),{youtubeIframeWrapperRef:eC,resolvedAspectRatio:eV,youtubeAspectRatio:eB}=O({videoType:K?.videoType,sizeSetting:el,background:es,videoObjectFit:en,heroBannerWrapperRef:X,isYoutubeVideoMigrated:q?.isYoutubeVideoMigrated}),eI=m({...h(eB,en)}),eM=m({...b(eV,en,es)}),eY=a({...V(q?.isYoutubeVideoMigrated)}),ez=a({...B()}),eE=a({...S()}),eL=t(()=>{if(!M(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:eM,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:eE,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:eI,wrapperClass:eY,iframeClass:ez})})},[K,es,ew,ez,eY,eI,eM,eC]);return o("div",{className:eu,style:ec,children:[o("div",{ref:G,className:ek,style:eH,children:[e("div",{ref:P,className:eN,style:eT,children:eL}),!!ei&&e("div",{"aria-label":"Overlay",className:ef,style:ey})]}),e(l,{className:eh,style:ev,setting:{layout:Z,horizontalAlign:E(Z,ed,ep),verticalAlign:_},styles:{verticalGutter:er,width:z(em),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:U?.cols?.length===1,onBlur:e=>Y(e),children:i(F)}),e(d,{pictureClass:eg,srcSet:x(es),className:ej,aspectRatio:r(el),style:eb,alt:eo,title:et,fallbackImg:L})]})};export{W as default};
