import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as r}from"@gem-sdk/core";import o from"../../text/components/Text.liquid.js";import{getInsertLinkData as i,getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as d,createStyle as a,createClass as n,createAttr as c,If as u}from"@gem-sdk/system";import{getAttr as m,getAttrHref as p}from"../common/attrs.js";import{getDateStyle as $,getTextFrontStyle as y,getTextBackStyle as f,getWrapperStyle as g,getContainStyle as x}from"../common/styles.js";import{getTextFrontClasses as w,getWrapperClasses as b,getContentClasses as h,getLinkClasses as k,getDateClasses as v,getTextBackClasses as j}from"../common/classes.js";let Countdown=L=>{let{setting:S,styles:A,builderProps:C,advanced:E,pageContext:N}=L,{labelTypo:I,numTypo:P,numTypography:q,labelTypography:F,enableLabelTextStyle:G}=A??{},{weekLabel:O,dayLabel:T,hourLabel:_,minuteLabel:J,secondLabel:M,enableWeek:R,enableDay:V,enableHour:z,enableMinute:B,enableSecond:D,redirectUrl:H,translate:K,autoHideWhenTimeout:Q}=S??{},U=!!H?.link,{urlData:W}=i("",H),X=d({...S,...C}),Y=a({...$(A)}),Z=e=>n({...v(e)}),ee=n({...w(A)}),et=a({...y(A)}),es=a({...f(A)}),er=e=>n({...j(A,e)}),eo=c({...m({uid:C?.uid||""})}),ei=c({...p({uid:W.href||""})}),el=a({...g(A)}),ed=n({...b(E?.cssClass)}),ea=n({...h({isLiquid:!0,autoHideWhenTimeout:Q})}),en=a({...x(A)}),ec=(t,s,r)=>e`
    <div style="${Y}" class="${Z(s)}">
    ${o({styles:{typography:q,typo:P},setting:{...S,text:"00",excludeFlex:!0,translate:""},style:et,className:ee,builderAttrs:{id:t},builderProps:{...C,uid:C?.uid,uidInteraction:`${C?.uid}-text`}})}
    ${u(!!G,e`
         ${o({styles:{typography:F,typo:I},setting:{...S,text:s,excludeFlex:!0,translate:r},style:es,className:er(s),builderProps:{...C,uid:C?.uid,uidInteraction:`${C?.uid}-text`},pageContext:N})}
    `)}
    </div>
    `,eu=n({...k()}),em=()=>t(s,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-countdown-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${r}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
    <gp-countdown-timer
        ${{...eo}}
        ${{...ei}}
        class="${ed}"
        style="${el}"
        gp-data='${JSON.stringify(X).replaceAll("'","&#039;")}'>
        <div id="section-countdown" class="${ea}" style="${en}">
          ${u(U,`<a
              href="${W.href}"
              target="${W?.target}"
              aria-label="Countdown link"
              class="${eu}"
            > </a>`)}
          ${u(R,ec("week",O,K?"weekLabel":""))}
          ${u(V,ec("day",T,K?"dayLabel":""))}
          ${u(z,ec("hour",_,K?"hourLabel":""))}
          ${u(B,ec("minute",J,K?"minuteLabel":""))}
          ${u(D,ec("second",M,K?"secondLabel":""))}
        </div>
     </gp-countdown-timer>
    ${em()}
  `};export{Countdown as default};
