'use client';
import{jsx as e,Fragment as t,jsxs as s}from"react/jsx-runtime";import{useProduct as o,useCurrentDevice as i,getResponsiveValueByScreen as r,makeStyleResponsive as c,makeLineClamp as m}from"@gem-sdk/core";import n from"../../../common/components/NoDataState.js";import{ICON_SVG as l}from"./common/helpers.js";import{createClass as a,createStyle as p,createAttr as d,If as h}from"@gem-sdk/system";import{getClasses as u,getButtonClasses as y,getClassPreBuilt as g}from"./common/classes.js";import{getTextStyle as f,getButtonStyle as x,getStaticCss as k}from"./common/styles.js";import{useGpDescription as N}from"./hooks/useGpDescription.js";let ProductDescription=j=>{let{setting:w,advanced:L,builderProps:b}=j,{htmlTag:v}=w??{},C="html"===v?"div":"p",H=o(),T=i(),D=r(w?.hasLineClamp,T),{ref:M,open:_,isShowViewMore:I,handleToggleShowMore:P,mode:S,redirectProductShopifyLink:A}=N(w),q=a({"gp-product-description":!0,[L?.cssClass]:!0}),G=a(u({setting:w,isLiquid:!1})),V=a(y({setting:w})),$=a({"gp-show-more-text":!0}),z=a({"gp-show-more-icon gp-ml-1":!0,..._?{"gp-rotate-180":!0}:{}}),B=a(g()),E=p({...f({setting:w}),..._?{}:c("line-clamp",m(w?.lineClamp,w?.hasLineClamp))}),F=p(x({setting:w})),J=d({"data-id":`${b?.uid}`}),K=d({"data-gp-text":""}),{gpDescriptionCss:O,textDescriptionCss:Q}=k(),R=!H?.descriptionHtml;return R&&"edit"===S?e(n,{elementType:"secondary",description:"Highlight key benefits with product description.",descriptionActions:[{text:"Add description",callback:A},{text:"sync data",callback:"syncProduct"}]}):e(t,{children:h(R,"",s("div",{...J,className:q,children:[e("style",{children:Q}),e("style",{children:O}),e("div",{className:B}),e(C,{ref:M,...K,className:G,style:E,dangerouslySetInnerHTML:{__html:H?.descriptionHtml||""}}),h(D&&I,s("button",{className:V,style:F,onClick:P,children:[e("span",{className:$,children:h(_,w?.viewLessText||"",w?.viewMoreText)}),h(w?.enableViewMoreIcon,e("span",{className:z,dangerouslySetInnerHTML:{__html:l}}))]})," ")]}))})};export{ProductDescription as default};
