import { unsafeCSS, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./chat-message.css.js";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
var ObcChatMessagePosition = /* @__PURE__ */ ((ObcChatMessagePosition2) => {
  ObcChatMessagePosition2["Top"] = "top";
  ObcChatMessagePosition2["Middle"] = "middle";
  ObcChatMessagePosition2["Bottom"] = "bottom";
  ObcChatMessagePosition2["Single"] = "single";
  return ObcChatMessagePosition2;
})(ObcChatMessagePosition || {});
let ObcChatMessage = class extends LitElement {
  constructor() {
    super(...arguments);
    this.showName = false;
    this.showDate = false;
    this.position = "single";
    this.dateFormatter = (date) => date.toLocaleTimeString(void 0, {
      hour12: false,
      minute: "2-digit",
      hour: "2-digit"
    });
    this.self = false;
  }
  render() {
    const round = this.position === "single" && !this.showDate && !this.showName;
    return html` <div
      class=${classMap({
      wrapper: true,
      self: this.self,
      other: !this.self,
      [this.position]: true,
      round
    })}
    >
      ${this.showName || this.showDate ? html`<div class="header">
            ${this.showName ? html`<div class="name">${this.name}</div>` : nothing}
            ${this.showDate ? html`<div class="date">
                  ${this.date !== void 0 ? this.dateFormatter(this.date) : nothing}
                </div>` : nothing}
          </div>` : nothing}
      <div class="content">
        <slot></slot>
      </div>
    </div>`;
  }
};
ObcChatMessage.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcChatMessage.prototype, "name", 2);
__decorateClass([
  property({ type: Boolean })
], ObcChatMessage.prototype, "showName", 2);
__decorateClass([
  property({ attribute: false })
], ObcChatMessage.prototype, "date", 2);
__decorateClass([
  property({ type: Boolean })
], ObcChatMessage.prototype, "showDate", 2);
__decorateClass([
  property({ type: String })
], ObcChatMessage.prototype, "position", 2);
__decorateClass([
  property({ attribute: false })
], ObcChatMessage.prototype, "dateFormatter", 2);
__decorateClass([
  property({ type: Boolean })
], ObcChatMessage.prototype, "self", 2);
ObcChatMessage = __decorateClass([
  customElement("obc-chat-message")
], ObcChatMessage);
export {
  ObcChatMessage,
  ObcChatMessagePosition
};
//# sourceMappingURL=chat-message.js.map
