import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./floating-item.css.js";
import "../button/button.js";
import { IconButtonVariant } from "../icon-button/icon-button.js";
import "../../icons/icon-close-google.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 ObcFloatingItemType = /* @__PURE__ */ ((ObcFloatingItemType2) => {
  ObcFloatingItemType2["Regular"] = "regular";
  ObcFloatingItemType2["Application"] = "application";
  return ObcFloatingItemType2;
})(ObcFloatingItemType || {});
var ObcFloatingItemDirection = /* @__PURE__ */ ((ObcFloatingItemDirection2) => {
  ObcFloatingItemDirection2["horizontal"] = "horizontal";
  ObcFloatingItemDirection2["vertical"] = "vertical";
  return ObcFloatingItemDirection2;
})(ObcFloatingItemDirection || {});
var ObcFloatingItemLineType = /* @__PURE__ */ ((ObcFloatingItemLineType2) => {
  ObcFloatingItemLineType2["singleLine"] = "single-line";
  ObcFloatingItemLineType2["multiLine"] = "multi-line";
  return ObcFloatingItemLineType2;
})(ObcFloatingItemLineType || {});
let ObcFloatingItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "regular";
    this.direction = "horizontal";
    this.hasTimestamp = false;
    this.hasDay = false;
    this.action = false;
    this.action2 = false;
    this.lineType = "single-line";
    this.onActionClick = () => this.dispatchEvent(new CustomEvent("action-click"));
    this.onAction2Click = () => this.dispatchEvent(new CustomEvent("action2-click"));
    this.onDismissClick = () => this.dispatchEvent(new CustomEvent("dismiss-click"));
  }
  render() {
    const horiz = this.direction === "horizontal";
    const showBtn1 = this.action;
    const showBtn2 = this.action && this.action2;
    const iconsTemplate = this.type === "application" ? html` <div class="icon-container">
            <div class="icon primary">
              <div class="round-icon-box">
                <slot name="primary-icon"></slot>
              </div>
            </div>
            <div class="icon secondary">
              <slot name="secondary-icon"></slot>
            </div>
          </div>` : html` <div class="icon-container">
            <div class="icon primary">
              <slot name="primary-icon"></slot>
            </div>
          </div>`;
    const closeInMessage = horiz ? html`<obc-icon-button
          .variant=${IconButtonVariant.flat}
          @click=${this.onDismissClick}
        >
          <obi-close-google></obi-close-google>
        </obc-icon-button>` : nothing;
    const dismissInAction = !horiz ? html`<obc-icon-button
          .variant=${IconButtonVariant.flat}
          @click=${this.onDismissClick}
        >
          <obi-close-google></obi-close-google>
        </obc-icon-button>` : nothing;
    return html`
      <div
        class=${classMap({
      wrapper: true,
      [`type-${this.type}`]: true,
      horizontal: horiz,
      vertical: !horiz,
      "has-action": showBtn1,
      "has-action2": showBtn2,
      "single-line": this.lineType === "single-line",
      "multi-line": this.lineType === "multi-line"
      /* multiLine */
    })}
      >
        <div class="content-container">
          ${/* only render icons *outside* when horiz */
    ""}
          ${horiz ? iconsTemplate : nothing}

          <div class="notification-container">
            ${horiz ? html`
                  <div class="horizontal-message-container">
                    <div class="message-container">
                      <div class="title-container">
                        <div class="title"><slot name="title"></slot></div>
                        ${this.hasTimestamp ? html`<div class="timestamp">
                              ${this.hasDay ? html`<slot name="day"></slot>` : nothing}
                              <slot name="time"></slot>
                            </div>` : nothing}
                      </div>
                      <div class="notification">
                        <slot name="description"></slot>
                      </div>
                    </div>
                    ${closeInMessage}
                  </div>
                ` : html`
                  ${/* non-horiz still gets icons INSIDE */
    ""} ${iconsTemplate}
                  <div class="message-container">
                    <div class="title-container">
                      <div class="title"><slot name="title"></slot></div>
                      ${this.hasTimestamp ? html`<div class="timestamp">
                            ${this.hasDay ? html`<slot name="day"></slot>` : nothing}
                            <slot name="time"></slot>
                          </div>` : nothing}
                    </div>
                    <div class="notification">
                      <slot name="description"></slot>
                    </div>
                  </div>
                `}
            ${horiz && (showBtn1 || showBtn2) ? html`
                  <div class="action-container">
                    ${showBtn1 ? html`<obc-button
                          @click=${this.onActionClick}
                          .fullWidth=${true}
                        >
                          <slot name="action"></slot>
                        </obc-button>` : nothing}
                    ${showBtn2 ? html`<obc-button
                          @click=${this.onAction2Click}
                          .fullWidth=${true}
                        >
                          <slot name="action2"></slot>
                        </obc-button>` : nothing}
                  </div>
                ` : nothing}
          </div>

          ${/* vertical actions / dismiss */
    ""}
          ${!horiz && (showBtn1 || showBtn2 || dismissInAction) ? html`
                <div class="vertical-outer-action-container">
                  <div class="action-container">
                    ${showBtn1 ? html`<obc-button
                          @click=${this.onActionClick}
                          .fullWidth=${true}
                        >
                          <slot name="action"></slot>
                        </obc-button>` : nothing}
                    ${showBtn2 ? html`<obc-button
                          @click=${this.onAction2Click}
                          .fullWidth=${true}
                        >
                          <slot name="action2"></slot>
                        </obc-button>` : nothing}
                  </div>
                  ${dismissInAction}
                </div>
              ` : nothing}
        </div>
      </div>
    `;
  }
};
ObcFloatingItem.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcFloatingItem.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcFloatingItem.prototype, "direction", 2);
__decorateClass([
  property({ type: Boolean })
], ObcFloatingItem.prototype, "hasTimestamp", 2);
__decorateClass([
  property({ type: Boolean })
], ObcFloatingItem.prototype, "hasDay", 2);
__decorateClass([
  property({ type: Boolean })
], ObcFloatingItem.prototype, "action", 2);
__decorateClass([
  property({ type: Boolean })
], ObcFloatingItem.prototype, "action2", 2);
__decorateClass([
  property({ type: String })
], ObcFloatingItem.prototype, "lineType", 2);
ObcFloatingItem = __decorateClass([
  customElement("obc-floating-item")
], ObcFloatingItem);
export {
  ObcFloatingItem,
  ObcFloatingItemDirection,
  ObcFloatingItemLineType,
  ObcFloatingItemType
};
//# sourceMappingURL=floating-item.js.map
