import { unsafeCSS, LitElement, html, nothing } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./alert-detail-page.css.js";
import { property } from "lit/decorators.js";
import "../../components/button/button.js";
import "../../components/icon-button/icon-button.js";
import "../../components/alert-icon/alert-icon.js";
import "../../icons/icon-close-google.js";
import "../../icons/icon-alerts-shelf.js";
import "../../icons/icon-command-locked-f.js";
import "../../icons/icon-alert-category-a.js";
import "../../icons/icon-alert-category-b.js";
import "../../icons/icon-alert-category-c.js";
import { formatTimeSince, AlertCategory, isActive, isAcknowledged, isBlocked } from "../../types.js";
import { classMap } from "lit/directives/class-map.js";
import { localized, msg } from "@lit/localize";
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 AlertDetailPageType = /* @__PURE__ */ ((AlertDetailPageType2) => {
  AlertDetailPageType2["page"] = "page";
  AlertDetailPageType2["modal"] = "modal";
  AlertDetailPageType2["card"] = "card";
  return AlertDetailPageType2;
})(AlertDetailPageType || {});
let ObcAlertDetailPage = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "page";
    this.hasNote = false;
    this.hasActions = false;
    this.hasTagId = false;
    this.hasCategory = false;
    this.hasActivated = false;
    this.hasTimer = false;
    this.hasAcknowledged = false;
    this.hasAcknowledgedBy = false;
    this.hasRectified = false;
    this.hasShelvingTimer = false;
    this.hasShelvedBy = false;
    this.hasReadoutGraph = false;
    this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
    this.timeSinceFormatter = formatTimeSince;
    this._interval = null;
  }
  connectedCallback() {
    super.connectedCallback();
    this._interval = window.setInterval(() => {
      this.requestUpdate();
    }, 1e3);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    if (this._interval) {
      window.clearInterval(this._interval);
    }
  }
  get alertStatusIcon() {
    if (this.alert.shelved) {
      return html`<obi-alerts-shelf class="icon status"></obi-alerts-shelf>`;
    }
    if (this.alert.blocked) {
      return html`<obi-command-locked-f
        class="icon status"
      ></obi-command-locked-f>`;
    }
    return nothing;
  }
  renderDetail(has, slotName, defaultTitle, getValue, options = {}) {
    if (has) {
      const rawValue = getValue(this.alert);
      let value;
      let isIcon = false;
      if (rawValue instanceof Date) {
        if (options.timer) {
          value = this.timeSinceFormatter(rawValue);
        } else {
          value = this.timeFormatter(rawValue);
        }
      } else if (slotName === "category") {
        isIcon = true;
        if (rawValue === AlertCategory.a) {
          value = html`<obi-alert-category-a></obi-alert-category-a>`;
        } else if (rawValue === AlertCategory.b) {
          value = html`<obi-alert-category-b></obi-alert-category-b>`;
        } else if (rawValue === AlertCategory.c) {
          value = html`<obi-alert-category-c></obi-alert-category-c>`;
        }
      } else {
        value = rawValue;
      }
      return html`
        <div class="detail">
          <div class="detail-title">
            <slot name="${slotName}-label">${defaultTitle}</slot>
          </div>
          <div class="detail-value ${isIcon ? "icon" : ""}">
            <slot name="${slotName}-value"> ${value} </slot>
          </div>
        </div>
      `;
    }
    return nothing;
  }
  render() {
    if (!this.alert) {
      console.error("Alert is not set in alert-detail-page");
      return nothing;
    }
    const showCloseButton = [
      "modal"
      /* modal */
    ].includes(this.type);
    return html`
      <div
        class=${classMap({
      wrapper: true,
      [`type-${this.type}`]: true,
      "status-acknowledged": isAcknowledged(this.alert) && isActive(this.alert),
      "status-unacknowledged": !isAcknowledged(this.alert) && isActive(this.alert),
      "status-resolved": isActive(this.alert)
    })}
      >
        <div class="header">
          ${this.alertStatusIcon}
          <div class="icon alert">
            <obc-alert-icon
              .type=${this.alert.type}
              .acknowledged=${isAcknowledged(this.alert)}
              .active=${isActive(this.alert)}
              .outline=${isBlocked(this.alert)}
            ></obc-alert-icon>
          </div>
          <div class="title">
            <span>${this.alert.source}</span>
          </div>
          ${showCloseButton ? html`<div class="close-button">
                <obc-icon-button variant="flat">
                  <obi-close-google></obi-close-google>
                </obc-icon-button>
              </div>` : nothing}
        </div>
        <div class="divider"></div>
        <div class="body">
          <div class="description">
            <span>${this.alert.text}</span>
          </div>
          ${this.hasNote ? html`<div class="description sub-description">
                <div class="label">
                  <slot name="note-label">${msg("Note")}</slot>
                </div>
                <slot name="note">${this.alert.note}</slot>
              </div>` : nothing}
          ${this.renderDetail(
      this.hasTagId,
      "tagId",
      msg("Tag ID"),
      (alert) => alert.tagId
    )}
          ${this.renderDetail(
      this.hasCategory,
      "category",
      msg("Category"),
      (alert) => alert.category
    )}
          ${this.renderDetail(
      this.hasActivated,
      "time",
      msg("Activated"),
      (alert) => alert.time
    )}
          ${this.renderDetail(
      this.hasTimer,
      "activated-timer",
      msg("Alert timer"),
      (alert) => alert.time,
      { timer: true }
    )}
          ${this.renderDetail(
      this.hasAcknowledged,
      "acknowledgedAt",
      msg("Acknowledged"),
      (alert) => alert.acknowledged && alert.acknowledged.acknowledgedAt
    )}
          ${this.renderDetail(
      this.hasRectified,
      "rectified",
      msg("Rectified"),
      (alert) => alert.active !== true && alert.active.rectifiedTime
    )}
          ${this.renderDetail(
      this.hasAcknowledgedBy,
      "acknowledged-by",
      msg("Acknowledged by"),
      (alert) => alert.acknowledged && alert.acknowledged.acknowledgedBy
    )}
          ${this.renderDetail(
      this.hasShelvingTimer,
      "shelving-timer",
      msg("Shelfing timer"),
      (alert) => alert.shelved && alert.shelved.shelvedStartTime,
      { timer: true }
    )}
          ${this.renderDetail(
      this.hasShelvedBy,
      "shelved-by",
      msg("Shelved by"),
      (alert) => alert.shelved && alert.shelved.shelvedBy
    )}
          ${this.hasReadoutGraph ? html`
                <div class="readout-graph">
                  <div class="readout-graph-title">
                    <slot name="readout-graph-title">${msg("Readout")}</slot>
                  </div>
                  <div class="readout-graph-container">
                    <slot name="readout-graph"></slot>
                  </div>
                </div>
              ` : nothing}
        </div>
        ${this.hasActions ? html`<div class="actions">
              <slot name="action"></slot>
            </div>` : nothing}
      </div>
    `;
  }
};
ObcAlertDetailPage.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcAlertDetailPage.prototype, "type", 2);
__decorateClass([
  property({ attribute: false })
], ObcAlertDetailPage.prototype, "alert", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasNote", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasActions", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasTagId", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasCategory", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasActivated", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasTimer", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasAcknowledged", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasAcknowledgedBy", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasRectified", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasShelvingTimer", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasShelvedBy", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertDetailPage.prototype, "hasReadoutGraph", 2);
__decorateClass([
  property({ attribute: false })
], ObcAlertDetailPage.prototype, "timeFormatter", 2);
__decorateClass([
  property({ attribute: false })
], ObcAlertDetailPage.prototype, "timeSinceFormatter", 2);
ObcAlertDetailPage = __decorateClass([
  localized(),
  customElement("obc-alert-detail-page")
], ObcAlertDetailPage);
export {
  AlertDetailPageType,
  ObcAlertDetailPage
};
//# sourceMappingURL=alert-detail-page.js.map
