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