import{template as e,WrapRenderChildren as t,RenderChildren as s,RenderIf as l,isLocalEnv as i,baseAssetURL as a}from"@gem-sdk/core";import{getDynamicSourceLocales as r,getSettingPreloadData as d}from"../../helpers.js";import{createStateOrContext as o,createAttr as c,createStyle as p,createClass as m}from"@gem-sdk/system";import{getAttr as $,getAttrContent as n}from"../common/attrs.js";import y from"../../text/components/Text.liquid.js";import{getStyleWrapper as u,getTabParentListStyle as v,getTabListStyle as g,getContainContentStyle as f,getItemStyle as h}from"../common/styles.js";import{getClassesWrapper as b,getContainClasses as x,getStyleTagClasses as j,getTabParentListClasses as T,getTabListClasses as k,getWrapperContentClasses as A,getContainContentClasses as K,getTextClasses as S,getItemClasses as C}from"../common/classes.js";let Tabs=I=>{let{builderProps:E,style:N,setting:V,advanced:P,rawChildren:_}=I;delete V?.labelTypoV2?.attrs?.color;let{cssClass:q}=P??{},{panelWidth:z,childItem:F,labelAlign:G,labelTypo:O,labelTypoV2:W}=V??{},J=o({setting:V,builderProps:E}),L=void 0;V&&!V?.labelWidth&&(V.labelWidth={desktop:"200px"});let M=c({...$({uid:E?.uid||""})}),R=p({...u(V,N)}),U=m({...b({builderProps:E,advancedCssClass:q})}),w=m({...x({setting:V})}),B=j({panelWidth:z,builderProps:E}),D=m({...T()}),H=p({...v(V)}),Q=m({...k({setting:V})}),X=p({...g(V)}),Y=e=>m({...C({setting:V,isNotLiquid:!1,isActive:e,currentDevice:L})}),Z=e=>p({...h(V,e)}),ee=m({...A()}),et=m({...K()}),es=p({...f()}),el=c({...n({uid:E?.uid||""})}),ei=m({...S()}),ea=()=>F?.map(e=>e?.replaceAll("'","&#039;"))?.map((t,s)=>{let l=(V?.activeKey??0)<0||(V?.activeKey??0)>=(V?.childItem??[]).length?0===s:s===V?.activeKey,i=r({val:t,uid:E?.uid,settingId:`childItem_${s}`,pageContext:I.pageContext,isCapitalize:V?.labelTypoV2?.attrs?.transform==="capitalize",translate:V?.translate});return e`
      <li
        aria-hidden
        class="${Y(l)}"
        style="${Z(l)}"
        key="${E?.uid}"

      >
        ${y({className:ei,styles:{typo:W,typography:O,textAlign:G},setting:{text:i,htmlTag:"div",excludeFlex:!0,isForceValue:!0}})}
      </li>
    `}).join(""),er=()=>t({uid:E?.uid||"",customProps:_?.[0].customProps},_?.map((t,l)=>{let i=(V?.activeKey??0)<0||(V?.activeKey??0)>=(V?.childItem??[]).length?0===l:l===V?.activeKey;return t?e`${s({...t,parentUid:E?.uid,isActive:i})}`:""})),ed=()=>l(i,`<script ${d('class="gps-link" delay',"src")}="{{ 'gp-tab-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${d('class="gps-link" delay',"src")}="${a}/assets-v2/gp-tab-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return e`
    <gp-tab
      ${{...M}}
      style="${R}"
      class="${U}"
      gp-data='${JSON.stringify(J)?.replaceAll("'","&#039;")}'>
        <style>${B}</style>
        <div class="${w}">
          <div class="${D}" style="${H}">
            <ul class="${Q}" style="${X}">
              ${ea()}
            </ul>
          </div>
          <div class="${ee}">
            <div
              ${{...el}}
              class="${et}"
              style="${es}"
            >
              ${er()}
            </div>
          </div>
        </div>
    </gp-tab>
    ${ed()}
  `};export{Tabs as default};
