import{t as e,p as t,H as s,c as i,h as a}from"./p-CAus4tQt.js";import{r as n}from"./p-DKrliuRO.js";import{u as o}from"./p-DrCYkHs5.js";import{I as r}from"./p-CulpZvvY.js";import{M as l}from"./p-BWFJZIRX.js";import{k as c}from"./p-CNNbCnBf.js";const d=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.contentChange=i(this,"contentChange",7)}content;contentChange;errorMessage;isLoaded=!1;fileInput;emitContent(e){if(!this.content)return;const t={...this.content,...e};this.contentChange.emit(t)}handleSelectClick=()=>{this.fileInput&&this.fileInput.click()};handleFileChange=e=>{const t=e.target,s=t.files;if(!s)return;const i=s[0];if(!i)return;if(i.size>c)return this.errorMessage=o()("quick_message.image_too_large"),void(t.value="");const a=new FileReader;a.onload=()=>{this.emitContent({file_url:a.result}),this.errorMessage=void 0,t.value=""},a.readAsDataURL(i)};handleRemoveImage=()=>{this.emitContent({file_url:""}),this.errorMessage=void 0,this.isLoaded=!1};handleImageLoad=()=>{this.isLoaded=!0};render(){if(!this.content)return null;const e=n.get("theme"),t=o(),s=this.content.file_url||this.content.file?.url,i="border-primary",c="text-primary";return a("div",{class:"flex justify-end","data-theme":e},a("div",{class:"max-w-xs h-[220px] aspect-square"},a("input",{type:"file",accept:"image/*",class:"hidden",ref:e=>this.fileInput=e,onChange:this.handleFileChange}),s?a("div",{class:`group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm ${i}`},!this.isLoaded&&a(l,null),a("img",{src:s,alt:"preview-message-image",class:"h-[220px] w-full object-cover",onLoad:this.handleImageLoad,style:{animation:"z-fadeIn 0.3s ease-in-out"},loading:"lazy"}),a("div",{class:"absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100"},a("button",{type:"button",class:"inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer",onClick:this.handleSelectClick},a(r,{name:"Image",addClass:"size-4 text-surface"}),a("span",{class:"text-surface"},t("quick_message.change_image"))),a("button",{type:"button",class:"inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer",onClick:this.handleRemoveImage},a(r,{name:"Trash2",addClass:"size-4"}),a("span",{class:"text-red-500"},t("remove"))))):a("button",{type:"button",class:`flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current bg-background px-8 py-12 text-center shadow-sm transition-colors hover:bg-background ${i} cursor-pointer`,onClick:this.handleSelectClick},a(r,{name:"Image",addClass:`size-12 ${c}`}),a("span",{class:`text-base font-semibold leading-tight ${c}`},"+ ",t("quick_message.add_image")),a("span",{class:"text-[13px] font-medium text-theme-gray"},t("quick_message.image_size_hint"))),this.errorMessage&&a("p",{class:"mt-2 text-xs text-red-500"},this.errorMessage)))}},[512,"quick-message-image-content",{content:[16],errorMessage:[32],isLoaded:[32]}]);function m(){"undefined"!=typeof customElements&&["quick-message-image-content"].forEach((t=>{"quick-message-image-content"===t&&(customElements.get(e(t))||customElements.define(e(t),d))}))}m();export{d as Q,m as d}