import { unsafeCSS, LitElement, html } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./alert-list-page-small.css.js";
import { msg } from "@lit/localize";
import { property, state, query } from "lit/decorators.js";
import "../../building-blocks/alert-list/alert-list.js";
import "../../components/icon-button/icon-button.js";
import { ButtonVariant } from "../../components/button/button.js";
import "../../icons/icon-silence-iec.js";
import "../../icons/icon-alerts.js";
import "../../icons/icon-alerts-shelf.js";
import "../../icons/icon-unacknowledged.js";
import "../../components/dropdown-button/dropdown-button.js";
import "../../icons/icon-alarm-noack-iec.js";
import "../../icons/icon-warning-noack-iec.js";
import { getAlertListModeData, canAckFilter } from "../../components/alert-list-details/alert-list-details.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 AlertListMode = /* @__PURE__ */ ((AlertListMode2) => {
  AlertListMode2["UNACKED"] = "unacked";
  AlertListMode2["ALL"] = "all";
  AlertListMode2["SHELVED"] = "shelved";
  return AlertListMode2;
})(AlertListMode || {});
let ObcAlertListPageSmall = class extends LitElement {
  constructor() {
    super(...arguments);
    this.hasShelved = false;
    this.selectedMode = "all";
    this.alerts = [];
    this.showTime = false;
    this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
    this._mode = "all";
  }
  willUpdate(changedProperties) {
    if (changedProperties.has("selectedMode") && this._mode !== this.selectedMode) {
      this._mode = this.selectedMode;
    }
  }
  handleAckAllVisibleClick() {
    const tabName = this.selectedMode;
    const visibleElements = this.alertList.getVisibleAlerts();
    this.dispatchEvent(
      new CustomEvent("ack-all-visible-click", {
        detail: {
          alerts: visibleElements,
          mode: tabName
        }
      })
    );
  }
  onModeSelect(e) {
    this._mode = e.detail.value;
  }
  get metadata() {
    return getAlertListModeData(this.selectedMode);
  }
  onAckClick(e) {
    this.dispatchEvent(
      new CustomEvent("ack-click", {
        detail: {
          alert: e.detail.alert
        }
      })
    );
  }
  onRowClick(e) {
    this.dispatchEvent(
      new CustomEvent("row-click", {
        detail: { alert: e.detail.alert }
      })
    );
  }
  render() {
    const lists = [
      {
        name: "all",
        title: msg("All")
      },
      {
        name: "unacked",
        title: msg("Unacked")
      }
    ];
    if (this.hasShelved) {
      lists.push({
        name: "shelved",
        title: msg("Shelved")
      });
    }
    const metadata = this.metadata;
    const canAckAll = this.alerts.some(canAckFilter(metadata.filter));
    return html`
      <div class="wrapper">
        <obc-alert-list-details
          class="alert-list"
          .small=${true}
          .alerts=${this.alerts}
          .selectedMode=${this._mode}
          .showTime=${this.showTime}
          .timeFormatter=${this.timeFormatter}
          @ack-click=${this.onAckClick}
          @row-click=${this.onRowClick}
        ></obc-alert-list-details>
        <div class="action">
          <div class="btn-group">
            <obc-dropdown-button
              .value=${this._mode}
              @change=${this.onModeSelect}
              .options=${lists.map((v) => ({
      value: v.name,
      label: v.title
    }))}
            >
            </obc-dropdown-button>
          </div>

          <div class="btn-group">
            <obc-icon-button
              variant="normal"
              @click=${() => this.dispatchEvent(new CustomEvent("silence-click"))}
            >
              <obi-silence-iec></obi-silence-iec>
            </obc-icon-button>
            <obc-button
              .variant=${ButtonVariant.raised}
              .disabled=${!canAckAll}
              fullWidth
              class="btn"
              data-testid="ack-all-visible-button"
              @click=${() => this.handleAckAllVisibleClick()}
            >
              ${msg("ACK visible")}
            </obc-button>
          </div>
        </div>
      </div>
    `;
  }
};
ObcAlertListPageSmall.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcAlertListPageSmall.prototype, "hasShelved", 2);
__decorateClass([
  property({ type: String })
], ObcAlertListPageSmall.prototype, "selectedMode", 2);
__decorateClass([
  property({ type: Array })
], ObcAlertListPageSmall.prototype, "alerts", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertListPageSmall.prototype, "showTime", 2);
__decorateClass([
  property({ attribute: false })
], ObcAlertListPageSmall.prototype, "timeFormatter", 2);
__decorateClass([
  state()
], ObcAlertListPageSmall.prototype, "_mode", 2);
__decorateClass([
  query("obc-alert-list-details")
], ObcAlertListPageSmall.prototype, "alertList", 2);
ObcAlertListPageSmall = __decorateClass([
  customElement("obc-alert-list-page-small")
], ObcAlertListPageSmall);
export {
  AlertListMode,
  ObcAlertListPageSmall
};
//# sourceMappingURL=alert-list-page-small.js.map
