import { unsafeCSS, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import componentStyle from "./event-item.css.js";
import { property, state } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import "../../icons/icon-arrow-flyout-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 EventItemType = /* @__PURE__ */ ((EventItemType2) => {
  EventItemType2["SingleLine"] = "singleLine";
  EventItemType2["DoubleLine"] = "doubleLine";
  EventItemType2["Aggregated"] = "aggregated";
  return EventItemType2;
})(EventItemType || {});
let ObcEventItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.title = "";
    this.description = "";
    this.startTime = "";
    this.endTime = "";
    this.eventItemType = "singleLine";
    this.hasArrow = false;
    this.hasTime = false;
    this.hasEndTime = false;
    this.aggregatedCount = 0;
    this.colorCoded = false;
    this.disabled = false;
    this._pressing = false;
  }
  _handleClick(e) {
    e.stopPropagation();
    this.dispatchEvent(
      new CustomEvent("event-click", {
        bubbles: true,
        composed: true,
        detail: {
          title: this.title,
          startTime: this.startTime,
          endTime: this.endTime
        }
      })
    );
  }
  _getAggregatedText() {
    const count = this.aggregatedCount ?? 0;
    return count === 1 ? "1 more event" : `${count} more events`;
  }
  _handleKeyDown(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.stopPropagation();
      this._pressing = true;
      setTimeout(() => {
        this._pressing = false;
      }, 150);
    }
  }
  render() {
    const isAggregated = this.eventItemType === "aggregated";
    const isDoubleLine = this.eventItemType === "doubleLine";
    const isColorCoded = this.colorCoded;
    return html`
      <button
        type="button"
        @click=${this._handleClick}
        @keydown=${this._handleKeyDown}
        class=${classMap({
      wrapper: true,
      "type-aggregated": isAggregated,
      "type-double-line": isDoubleLine,
      "type-color-coded": isColorCoded,
      disabled: this.disabled,
      pressing: this._pressing
    })}
        ?disabled=${this.disabled}
      >
        <div class="visible-wrapper">
          <div class="event-content">
            ${this.hasTime && this.startTime ? html`
                  <div class="time-container">
                    <span class="time">${this.startTime}</span>
                    ${this.hasEndTime && this.endTime ? html`
                          <span class="time-separator">–</span>
                          <span class="time">${this.endTime}</span>
                        ` : nothing}
                  </div>
                ` : nothing}
            <div class="label-container">
              <div class="title-container">
                <p class="title">
                  ${isAggregated ? this._getAggregatedText() : this.title}
                </p>
              </div>
              ${isDoubleLine && this.description ? html`
                    <div class="description-container">
                      <p class="description">${this.description}</p>
                    </div>
                  ` : nothing}
            </div>
          </div>
          ${this.hasArrow ? html`<div class="arrow">
                <obi-arrow-flyout-google></obi-arrow-flyout-google>
              </div>` : nothing}
        </div>
      </button>
    `;
  }
};
ObcEventItem.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcEventItem.prototype, "title", 2);
__decorateClass([
  property({ type: String })
], ObcEventItem.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcEventItem.prototype, "startTime", 2);
__decorateClass([
  property({ type: String })
], ObcEventItem.prototype, "endTime", 2);
__decorateClass([
  property({ type: String })
], ObcEventItem.prototype, "eventItemType", 2);
__decorateClass([
  property({ type: Boolean })
], ObcEventItem.prototype, "hasArrow", 2);
__decorateClass([
  property({ type: Boolean })
], ObcEventItem.prototype, "hasTime", 2);
__decorateClass([
  property({ type: Boolean })
], ObcEventItem.prototype, "hasEndTime", 2);
__decorateClass([
  property({ type: Number })
], ObcEventItem.prototype, "aggregatedCount", 2);
__decorateClass([
  property({ type: Boolean })
], ObcEventItem.prototype, "colorCoded", 2);
__decorateClass([
  property({ type: Boolean })
], ObcEventItem.prototype, "disabled", 2);
__decorateClass([
  state()
], ObcEventItem.prototype, "_pressing", 2);
ObcEventItem = __decorateClass([
  customElement("obc-event-item")
], ObcEventItem);
export {
  EventItemType,
  ObcEventItem
};
//# sourceMappingURL=event-item.js.map
