import{template as t}from"@gem-sdk/core";import{createAttr as e,createStyle as s,createClass as i}from"@gem-sdk/system";import{getAdaptiveImageClasses as o}from"../common/classes.js";import{createBlurDataURL as a,getAdaptiveImageData as m}from"../common/helpers.js";import{getAdaptivePictureStyles as d,getAdaptiveImageStyles as r}from"../common/styles.js";let AdaptiveImage=h=>{let{alt:p,style:c,layout:l,srcSet:$,priority:g,className:w,aspectRatio:k,pageContext:u,pictureClass:b,borderRadius:f,enableLazyLoadImage:n=!0,...x}=h,{getDeviceSource:y}=m(h),{srcDesktop:L,srcTablet:j,srcMobile:v}=y({isLiquid:!0}),z=e({src:n&&!g?a($?.desktop?.width??0,$?.desktop?.height??0):L,"data-src":L}),A=s({...d()}),I=s({...r({layout:l,aspectRatio:k,borderRadius:f}),...c}),S=i({...o({className:w,hasLazyLoad:!g&&n,hasForceLoad:u?.isOptimizePlan})}),q=()=>t`
      ${v?`<source media="(max-width: 767px)" data-srcSet="${v}" srcset="${n&&!g?a($?.mobile?.width??$?.tablet?.width??$?.desktop?.width??0,$?.mobile?.height??$?.tablet?.height??$?.desktop?.height??0):v}" />`:""}
      ${j?`<source media="(max-width: 1024px)" data-srcSet="${j}" srcset="${n&&!g?a($?.tablet?.width??$?.desktop?.width??0,$?.tablet?.height??$?.desktop?.height??0):j}" />`:""}
    `,F=()=>t`
      <img
        ${{...x}}
        ${{...z}}
        alt="${p}"
        width="100%"
        style="${I}"
        class="${S}"
      />
    `;return t`
    <picture style="${A}" class="${b}">
      ${q()}
      ${F()}
    </picture>
  `};export{AdaptiveImage as default};
