'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,makeStyle as d,getStyleShadow as m,makeStyleResponsive as y,getGlobalColorStateStyle as h,cls 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 A=({styles:A,builderProps:S})=>{let b=i(t=>t.article),[k,C]=x(!1),$=f(null),_=o(),j=r(t=>t.storefrontUrl),{t:I}=n(),L=c(A?.hasLineClamp,_),N=c(A?.lineClamp,_);u(()=>{C(!1)},[L,N,b?.description]);let T=a(A?.typo,A?.typography),D=l(A?.typo,A?.typography),U=`
    .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:U}),t("div",{ref:$,className:g("gp-p-description-text gp-content-text-override gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre",T),style:{...h("c",A?.color),...y("ta",A?.textAlign),...L&&!k?y("line-clamp",A?.lineClamp):{},...m({value:A?.typo?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:A?.typo?.custom?.hasShadowText}),...d({tt:A?.transform}),...D},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:()=>{if(!j)return;let t=new URL(j);window.open(`${t.protocol}//${t.host}/admin/content/articles`)}},{text:I("sync data"),callback:"syncArticle"}]})})})};export{A as default};
