'use client';
import{jsx as t,jsxs as e,Fragment as p}from"react/jsx-runtime";import{useArticleStore as i,useCurrentDevice as o,useShopStore as r,useI18nStore as n,getResponsiveValueByScreen as c,composeTypographyClassName as a,composeTypographyStyle as l,isSafari as s,cls as d,getGlobalColorStateStyle as m,makeStyleResponsive as y,getStyleShadow as h,makeStyle as g}from"@gem-sdk/core";import{useState as x,useRef as f,useEffect as u}from"react";import w from"../../common/components/NoDataState.js";import{styleOverride as v}from"../common/helpers.js";let ArticleContent=({styles:A,builderProps:S})=>{let b=i(t=>t.article),[C,k]=x(!1),$=f(null),_=o(),j=r(t=>t.storefrontUrl),{t:I}=n(),L=c(A?.hasLineClamp,_),N=c(A?.lineClamp,_),T=()=>{if(!j)return;let t=new URL(j);window.open(`${t.protocol}//${t.host}/admin/content/articles`)};u(()=>{k(!1)},[L,N,b?.description]);let D=a(A?.typo,A?.typography),U=l(A?.typo,A?.typography),E=`
    .gp-p-description-text a:empty,
    .gp-p-description-text ul:empty,
    .gp-p-description-text dl:empty,
    .gp-p-description-text div:empty,
    .gp-p-description-text section:empty,
    .gp-p-description-text article:empty,
    .gp-p-description-text p:empty,
    .gp-p-description-text h1:empty,
    .gp-p-description-text h2:empty,
    .gp-p-description-text h3:empty,
    .gp-p-description-text h4:empty,
    .gp-p-description-text h5:empty,
    .gp-p-description-text h6:empty {
        display: none;
    }
   ${v}
  `;return t("div",{"data-id":S?.uid,id:`shopify-text-element-${S?.uid}`,className:"gp-article-description","data-article-id":b?.baseID?.replace("gid://shopify/OnlineStoreArticle/",""),children:b?.content?.html?e(p,{children:[!s()&&t("style",{children:E}),t("div",{ref:$,className:d("gp-p-description-text gp-content-text-override gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre",D),style:{...m("c",A?.color),...y("ta",A?.textAlign),...L&&!C?y("line-clamp",A?.lineClamp):{},...h({value:A?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:A?.typo?.custom?.hasShadowText}),...g({tt:A?.transform}),...U},dangerouslySetInnerHTML:{__html:b?.content?.html}})]}):t("div",{children:t(w,{elementType:"secondary",description:I("Inform and provide value to the audience with article content."),descriptionActions:[{text:I("Add article content"),callback:T},{text:I("sync data"),callback:"syncArticle"}]})})})};export{ArticleContent as default};
