import{A as l,b as n,a as c,n as a}from"./property-ChPqBGW_.js";import{t as g}from"./custom-element-C-crYl4r.js";import{b as y}from"./tokens-BNnjLb74.js";import"./mb-avatar-Da8xFzWh.js";import{B as b}from"./base-element-8qyqvBFG.js";import"./state-BnFRu-9h.js";import"./index-DWRYsVdq.js";var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(s,i,m,o)=>{for(var r=o>1?void 0:o?h(i,m):i,d=s.length-1,p;d>=0;d--)(p=s[d])&&(r=(o?p(i,m,r):p(r))||r);return o&&r&&u(i,m,r),r};function v(s){return new Date(s).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}let e=class extends b{constructor(){super("MbMessage"),this.type="text",this.self=!1,this.align="start",this.layout="default",this.hideHeader=!1,this.hideAvatar=!1,this.showTime=!0}get displayName(){return this.message?.senderName||this.senderName||"Unknown"}get displayContent(){return this.message?.content||this.content||""}get displayAvatar(){return this.senderAvatar||""}get displayTime(){const s=this.message?.timestamp||this.timestamp;return s?v(s):""}render(){return n`
      <div class="message-container">
        ${this.type!=="system"?this.renderAvatar():l}
        
        <div class="message-content">
          ${!this.hideHeader&&this.type!=="system"?this.renderHeader():l}
          
          <div class="message-body">
            <slot name="content">
              ${this.displayContent}
            </slot>
          </div>
          
          <div class="message-actions">
            <slot name="actions"></slot>
          </div>
        </div>
      </div>
    `}renderAvatar(){return n`
      <div class="avatar-wrapper">
        <slot name="avatar">
          <mb-avatar
            name=${this.displayName}
            src=${this.displayAvatar}
            size="sm"
          ></mb-avatar>
        </slot>
      </div>
    `}renderHeader(){return n`
      <div class="message-header">
        <span class="sender-name">${this.displayName}</span>
        ${this.showTime&&this.displayTime?n`
          <span class="message-time">${this.displayTime}</span>
        `:l}
      </div>
    `}};e.styles=[y,c`
      :host {
        --_bg: var(--monibuca-message-bg, var(--monibuca-color-bg-secondary));
        --_color: var(--monibuca-message-color, var(--monibuca-color-text));
        --_radius: var(--monibuca-message-radius, var(--monibuca-radius-md));
        --_padding: var(--monibuca-message-padding, var(--monibuca-spacing-xs) var(--monibuca-spacing-sm));
        --_self-bg: var(--monibuca-message-self-bg, var(--monibuca-color-primary-bg));
        
        display: block;
      }

      .message-container {
        display: flex;
        gap: var(--monibuca-spacing-xs);
        align-items: flex-start;
      }

      /* Alignment */
      :host([align="end"]) .message-container {
        flex-direction: row-reverse;
      }

      .avatar-wrapper {
        flex-shrink: 0;
      }

      mb-avatar {
        --monibuca-avatar-size: 32px;
      }

      .message-content {
        flex: 1;
        min-width: 0;
        max-width: 80%;
      }

      :host([align="end"]) .message-content {
        text-align: right;
      }

      .message-header {
        display: flex;
        align-items: baseline;
        gap: var(--monibuca-spacing-xs);
        margin-bottom: var(--monibuca-spacing-xxs);
      }

      :host([align="end"]) .message-header {
        flex-direction: row-reverse;
      }

      .sender-name {
        font-size: var(--monibuca-font-size-sm);
        font-weight: var(--monibuca-font-weight-medium);
        color: var(--monibuca-color-text);
      }

      .message-time {
        font-size: var(--monibuca-font-size-xs);
        color: var(--monibuca-color-text-tertiary);
      }

      .message-body {
        display: inline-block;
        padding: var(--_padding);
        background: var(--_bg);
        border-radius: var(--_radius);
        color: var(--_color);
        font-size: var(--monibuca-font-size-md);
        line-height: var(--monibuca-line-height-normal);
        word-break: break-word;
        text-align: left;
      }

      :host([self]) .message-body {
        background: var(--_self-bg);
      }

      /* Compact layout */
      :host([layout="compact"]) .avatar-wrapper {
        display: none;
      }

      :host([layout="compact"]) .message-content {
        max-width: 100%;
      }

      :host([layout="compact"]) .message-header {
        display: inline;
      }

      :host([layout="compact"]) .sender-name::after {
        content: ': ';
      }

      :host([layout="compact"]) .message-body {
        display: inline;
        padding: 0;
        background: none;
        border-radius: 0;
      }

      /* Bubble layout */
      :host([layout="bubble"]) .message-body {
        border-radius: 16px;
        border-bottom-left-radius: 4px;
      }

      :host([layout="bubble"][align="end"]) .message-body {
        border-radius: 16px;
        border-bottom-right-radius: 4px;
      }

      /* Hide header option */
      :host([hide-header]) .message-header {
        display: none;
      }

      /* Hide avatar option */
      :host([hide-avatar]) .avatar-wrapper {
        visibility: hidden;
        width: 32px;
      }

      /* Actions */
      .message-actions {
        opacity: 0;
        transition: opacity var(--monibuca-duration-fast);
      }

      .message-container:hover .message-actions {
        opacity: 1;
      }

      /* System message */
      :host([type="system"]) .message-container {
        justify-content: center;
      }

      :host([type="system"]) .message-body {
        background: transparent;
        color: var(--monibuca-color-text-tertiary);
        font-size: var(--monibuca-font-size-sm);
        text-align: center;
      }

      :host([type="system"]) .avatar-wrapper,
      :host([type="system"]) .message-header {
        display: none;
      }
    `];t([a({type:Object})],e.prototype,"message",2);t([a({type:String,attribute:"sender-id"})],e.prototype,"senderId",2);t([a({type:String,attribute:"sender-name"})],e.prototype,"senderName",2);t([a({type:String,attribute:"sender-avatar"})],e.prototype,"senderAvatar",2);t([a({type:String})],e.prototype,"content",2);t([a({type:Number})],e.prototype,"timestamp",2);t([a({type:String,reflect:!0})],e.prototype,"type",2);t([a({type:Boolean,reflect:!0})],e.prototype,"self",2);t([a({type:String,reflect:!0})],e.prototype,"align",2);t([a({type:String,reflect:!0})],e.prototype,"layout",2);t([a({type:Boolean,reflect:!0,attribute:"hide-header"})],e.prototype,"hideHeader",2);t([a({type:Boolean,reflect:!0,attribute:"hide-avatar"})],e.prototype,"hideAvatar",2);t([a({type:Boolean,attribute:"show-time"})],e.prototype,"showTime",2);e=t([g("mb-message")],e);export{e as MbMessage};
