import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./message-menu-item.css.js";
import { classMap } from "lit/directives/class-map.js";
import "../button/button.js";
import "../../icons/icon-chevron-down-google.js";
import "../../icons/icon-chevron-up-google.js";
import { customElement } from "../../decorator.js";
import "../../icons/icon-alerts-shelf.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 ObcMessageMenuItemSize = /* @__PURE__ */ ((ObcMessageMenuItemSize2) => {
  ObcMessageMenuItemSize2["SingleLine"] = "single-line";
  ObcMessageMenuItemSize2["DoubleLine"] = "double-line";
  return ObcMessageMenuItemSize2;
})(ObcMessageMenuItemSize || {});
let ObcMessageMenuItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.size = "single-line";
    this.stackVertical = false;
    this.enhancedIcon = false;
    this.open = false;
    this.title = "";
    this.description = "";
    this.day = "";
    this.time = "";
    this.primaryActionLabel = "";
    this.secondaryActionLabel = "";
    this.hasPrimaryIcon = false;
    this.hasSecondaryIcon = false;
    this.hasTrailingIcon = false;
    this.isShelved = false;
    this.hasActionLabelSlot = false;
  }
  get activeSize() {
    if (this.open) {
      return "multi-line";
    }
    return this.size;
  }
  get hasTimestamp() {
    return this.time !== "" || this.day !== "";
  }
  get hasDay() {
    return this.day !== "";
  }
  get hasPrimaryAction() {
    return this.primaryActionLabel !== "" || this.hasActionLabelSlot;
  }
  get hasSecondaryAction() {
    return this.secondaryActionLabel !== "";
  }
  get isVertical() {
    return this.stackVertical;
  }
  handleKeyDown(e) {
    if (e.target !== e.currentTarget) {
      return;
    }
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      this.handleMessageClick();
    }
  }
  handleMessageClick() {
    this.open = !this.open;
    this.dispatchEvent(
      new CustomEvent("message-click", {
        detail: {
          open: this.open
        },
        bubbles: true,
        composed: true
      })
    );
  }
  handlePrimaryActionClick(e) {
    e.stopPropagation();
    this.dispatchEvent(
      new CustomEvent("primary-action-click", {
        bubbles: true,
        composed: true
      })
    );
  }
  handleSecondaryActionClick(e) {
    e.stopPropagation();
    this.dispatchEvent(
      new CustomEvent("secondary-action-click", {
        bubbles: true,
        composed: true
      })
    );
  }
  render() {
    return html`
      <div
        class=${classMap({
      wrapper: true,
      ["active-size-" + this.activeSize]: true,
      ["size-" + this.size]: true,
      ["enhanced-icon"]: this.enhancedIcon,
      ["has-date"]: this.hasTimestamp,
      ["stack-vertical"]: this.stackVertical,
      ["stack-horizontal"]: !this.stackVertical
    })}
        role="button"
        tabindex="0"
        @click=${this.handleMessageClick}
        @keydown=${this.handleKeyDown}
      >
        <div class="content-container">
          <div class="icon-container">
            ${this.isShelved ? html`<div class="icon">
                  <obi-alerts-shelf></obi-alerts-shelf>
                </div>` : nothing}
            ${this.hasPrimaryIcon ? html`<div class="icon primary">
                  <slot name="primary-icon"></slot>
                </div>` : nothing}
            ${this.hasSecondaryIcon ? html`<div class="icon secondary">
                  <slot name="secondary-icon"></slot>
                </div>` : nothing}
          </div>
          <div class="text-container">
            <div class="title-container">
              <slot name="title">${this.title}</slot>
            </div>
            <div class="description-container">
              <slot name="description">${this.description}</slot>
            </div>
            ${this.hasTimestamp ? html`<div class="date-container">
                  ${this.hasDay ? html`<span>${this.day}</span>` : nothing}
                  <span>${this.time}</span>
                </div>` : nothing}
            <div class="chevron">
              ${this.open ? html`<obi-chevron-up-google></obi-chevron-up-google>` : html`<obi-chevron-down-google></obi-chevron-down-google>`}
            </div>
          </div>
        </div>
        ${this.hasPrimaryAction || this.hasSecondaryAction || this.hasTrailingIcon && !this.isVertical ? html`<div class="action-button-container" part="action-container">
              ${this.hasSecondaryAction ? html`<obc-button
                    variant="normal"
                    .fullWidth=${this.isVertical}
                    @click=${this.handleSecondaryActionClick}
                  >
                    ${this.secondaryActionLabel}
                  </obc-button>` : nothing}
              ${this.hasPrimaryAction ? html`<obc-button
                    variant="normal"
                    .fullWidth=${this.isVertical}
                    @click=${this.handlePrimaryActionClick}
                  >
                    ${this.hasActionLabelSlot ? html`<slot name="action-label"></slot>` : this.primaryActionLabel}
                  </obc-button>` : nothing}
              ${this.hasTrailingIcon && !this.isVertical ? html`<div class="trailing-icon" part="trailing-icon">
                    <slot name="trailing-icon"></slot>
                  </div>` : nothing}
            </div>` : nothing}
      </div>
    `;
  }
};
ObcMessageMenuItem.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "stackVertical", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "enhancedIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "open", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "title", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "day", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "time", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "primaryActionLabel", 2);
__decorateClass([
  property({ type: String })
], ObcMessageMenuItem.prototype, "secondaryActionLabel", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "hasPrimaryIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "hasSecondaryIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "hasTrailingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "isShelved", 2);
__decorateClass([
  property({ type: Boolean })
], ObcMessageMenuItem.prototype, "hasActionLabelSlot", 2);
ObcMessageMenuItem = __decorateClass([
  customElement("obc-message-menu-item")
], ObcMessageMenuItem);
export {
  ObcMessageMenuItem,
  ObcMessageMenuItemSize
};
//# sourceMappingURL=message-menu-item.js.map
