'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 l,getAspectRatioGlobalSize as r}from"@gem-sdk/core";import i from"../../grid/components/row/Row.js";import{createStyle as m,createClass as a}from"@gem-sdk/system";import p from"../../image/components/AdaptiveImage.js";import d from"../../video/components/HTML5Embed.js";import{getContainerStyle as n,getOverlayStyle as c,getRowStyle as y,getAdaptiveStyle as f,getBackgroundStyle as u,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 H,getAdaptiveClasses as k,getBackgroundClasses as w,getContainBackgroundClasses as T,getHtml5VideoClasses as C,getWrapperYoutubeClasses as I,getIframeYoutubeClasses as L}from"../common/classes.js";import{getAspectRatioSettings as z,getBackgroundImageHeroBanner as B,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=>{s();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:es,sizeSetting:el,contentWidth:er,hoverEffect:ei,contentPosition1Col:em,contentPosition2Col:ea}=q??{},ep=z(Y?.ratioOptions,Y?.aspectRatio),ed=m({...n(q,Y)}),en=a({...g(Y,q)}),ec=m({...c(q)}),ey=a({...j(q)}),ef=m({...y(q)}),eu=a({...N(q,Y)}),ev=m({...f(q)}),eh=a({...H()}),eb=a({...k()}),eg=a({...w(ei,!1)}),ej=m({...B(eo,!1,!0),...u(q,Z,G)}),eN=a({...T()}),eH=m({...v(q)}),ek=a({...C(Y?.aspectRatio,!P)}),ew=m({...h(ep)}),eT=m({...b(ep)}),eC=a({...I()}),eI=a({...L()}),eL=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(d,{muted:!0,loop:J?.loop,controls:!1,autoplay:!0,src:J?.videoHtml5||"",title:"Video",style:eT,className:ek});let o=J?.video??"",t=M(o),s=J?.loop?1:0,l=`&loop=${s}&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:eC,iframeClass:eI})},[J,eo,ek,eI,eC,ew,eT]);return o("div",{className:en,style:ed,children:[o("div",{ref:F,className:eN,style:eH,children:[e("div",{ref:K,className:eg,style:ej,children:eL}),!!et&&e("div",{"aria-label":"Overlay",className:ey,style:ec})]}),e(i,{className:eu,style:ef,setting:{layout:U,horizontalAlign:E(U,em,ea),verticalAlign:X},styles:{verticalGutter:es,width:x(er),fullWidth:{desktop:!1,tablet:!1,mobile:!1}},hiddenEmptyCol:Q?.cols?.length===1,onBlur:e=>A(e),children:l(D)}),e(p,{pictureClass:eh,srcSet:O(eo),className:eb,aspectRatio:r(el),style:ev,alt:_,title:ee,enableLazyLoadImage:!1,fallbackImg:V})]})};export{HeroBannerItem as default};
