import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as o}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getInsertLinkData as r,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 w}from"../common/styles.js";import{getTextFrontClasses as x,getWrapperClasses as b,getContentClasses as h,getLinkClasses as v,getDateClasses as j,getTextBackClasses as k}from"../common/classes.js";import{Countdown as S}from"../settings/configs/translate.js";let Countdown=L=>{let{setting:C,styles:A,builderProps:E,advanced:N,pageContext:F}=L,{labelTypo:I,numTypo:P,numTypography:q,labelTypography:G,enableLabelTextStyle:O}=A??{},{weekLabel:T,dayLabel:V,hourLabel:_,minuteLabel:J,secondLabel:M,enableWeek:R,enableDay:z,enableHour:B,enableMinute:D,enableSecond:H,redirectUrl:K,autoHideWhenTimeout:Q}=C??{},U=!!K?.link,{urlData:W}=r("",K),X=d({...C,...E}),Y=a({...$(A)}),Z=e=>n({...j(e)}),ee=n({...x(A)}),et=a({...y(A)}),es=a({...f(A)}),eo=e=>n({...k(A,e)}),ei=c({...m({uid:E?.uid||""})}),er=c({...p({uid:W.href||""})}),el=a({...g(A)}),ed=n({...b(N?.cssClass)}),ea=n({...h({isLiquid:!0,autoHideWhenTimeout:Q})}),en=a({...w(A)}),ec=(t,s,o)=>{let r=o&&o in S?S[o]?.id:void 0;return e`
    <div style="${Y}" class="${Z(s)}">
    ${i({styles:{typography:q,typo:P},setting:{...C,text:"00",excludeFlex:!0,isForceValue:!0},style:et,className:ee,builderAttrs:{id:t},builderProps:{...E,uid:E?.uid,uidInteraction:`${E?.uid}-text`}})}
    ${u(!!O,e`
         ${i({styles:{typography:G,typo:I},setting:{...C,text:s,excludeFlex:!0},translateSetting:r,style:es,className:eo(s),builderProps:{...E,uid:E?.uid,uidInteraction:`${E?.uid}-text`},pageContext:F})}
    `)}
    </div>
    `},eu=n({...v()}),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")}="${o}/assets-v2/gp-countdown-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
    <gp-countdown-timer
        ${{...ei}}
        ${{...er}}
        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",T,"weekLabel"))}
          ${u(z,ec("day",V,"dayLabel"))}
          ${u(B,ec("hour",_,"hourLabel"))}
          ${u(D,ec("minute",J,"minuteLabel"))}
          ${u(H,ec("second",M,"secondLabel"))}
      </div>
     </gp-countdown-timer>
    ${em()}
  `};export{Countdown as default};
