import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property, state, query } from "lit/decorators.js";
import compentStyle from "./alert-menu.css.js";
import "../button/button.js";
import "../../icons/icon-chevron-right-google.js";
import "../../icons/icon-silence-iec.js";
import "../../icons/icon-alert-list.js";
import "../../icons/icon-alerts.js";
import "../../icons/icon-alerts-shelf.js";
import "../../icons/icon-unacknowledged.js";
import "../tabbed-card/tabbed-card.js";
import { localized, msg } from "@lit/localize";
import { customElement } from "../../decorator.js";
import "../../building-blocks/alert-list/alert-list.js";
import { ObcAlertMenuItemStatus } from "../alert-menu-item/alert-menu-item.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;
};
let ObcAlertMenu = class extends LitElement {
  constructor() {
    super(...arguments);
    this.hasShelved = false;
    this.canAckAll = false;
    this._selectedTabIndex = 1;
  }
  handleAckAllVisibleClick() {
    const panel = this.alertList;
    const visibleElements = panel.getVisibleElements();
    this.dispatchEvent(
      new CustomEvent("ack-all-visible-click", {
        detail: {
          visibleElements,
          tabName: this.getSelectedTab().name
        }
      })
    );
  }
  onTabChange(e) {
    this._selectedTabIndex = e.detail.tab;
  }
  getSelectedTab() {
    if (this._selectedTabIndex === 0) {
      return {
        name: "unacked",
        emptyTitle: msg("No unacknowledged alerts"),
        emptyDescription: msg(
          "Go to the 'Alert list' for more details or to manage existing alerts."
        ),
        emptyIcon: html`<obi-unacknowledged></obi-unacknowledged>`,
        class: "unacked",
        filter: (item) => {
          return item.getAttribute("status") === ObcAlertMenuItemStatus.Unacknowledged && !item.hasAttribute("shelved");
        }
      };
    } else if (this._selectedTabIndex === 2) {
      return {
        name: "shelved",
        emptyTitle: msg("No shelved alerts"),
        emptyDescription: msg(
          "Go to the 'Alert list' for more details or to manage existing alerts."
        ),
        emptyIcon: html`<obi-alerts-shelf></obi-alerts-shelf>`,
        class: "shelved",
        filter: (item) => {
          return item.hasAttribute("shelved");
        }
      };
    } else {
      return {
        name: "all",
        emptyTitle: msg("No active alerts"),
        emptyDescription: msg(
          "Go to the 'Alert list' for more details or to manage existing alerts."
        ),
        emptyIcon: html`<obi-alerts></obi-alerts>`,
        class: "all",
        filter: (item) => {
          return !item.hasAttribute("shelved");
        }
      };
    }
  }
  render() {
    const t = this.getSelectedTab();
    return html`
      <obc-tabbed-card
        .nTabs=${this.hasShelved ? 3 : 2}
        class="wrapper"
        part="wrapper"
        .selectedTab=${this._selectedTabIndex}
        hasDefaultSlotOnly
        @tab-change=${this.onTabChange}
      >
        <span slot="tab-title-0">${msg("Unacked")}</span>
        <span slot="tab-title-1">${msg("Active alerts")}</span>
        ${this.hasShelved ? html`<span slot="tab-title-2">${msg("Shelved")}</span>` : nothing}
        <div class="container">
          <obc-alert-list class="alert-list ${t.class}" .filter=${t.filter}>
            <slot></slot>
            <slot name="empty-${t.name}-title" slot="empty-title"
              >${t.emptyTitle}</slot
            >
            <slot name="empty-${t.name}-description" slot="empty-description"
              >${t.emptyDescription}</slot
            >
            <slot name="empty-${t.name}-icon" slot="empty-icon"
              >${t.emptyIcon}</slot
            >
          </obc-alert-list>
          <div class="action">
            <obc-button
              variant="raised"
              .disabled=${!this.canAckAll}
              fullWidth
              class="btn"
              data-testid="ack-all-visible-button"
              @click=${this.handleAckAllVisibleClick}
            >
              ${msg("ACK visible")}
            </obc-button>
            <obc-button
              variant="normal"
              fullWidth
              class="btn"
              showLeadingIcon
              @click=${() => this.dispatchEvent(new CustomEvent("silence-click"))}
            >
              <obi-silence-iec slot="leading-icon"></obi-silence-iec>
              ${msg("Silence")}
            </obc-button>
            <obc-button
              variant="normal"
              class="btn"
              fullWidth
              showLeadingIcon
              showTrailingIcon
              @click=${() => this.dispatchEvent(new CustomEvent("go-to-alert-list-click"))}
            >
              <obi-alert-list slot="leading-icon"></obi-alert-list>
              <obi-chevron-right-google
                slot="trailing-icon"
              ></obi-chevron-right-google>
              ${msg("Alerts")}
            </obc-button>
          </div>
        </div>
      </obc-tabbed-card>
    `;
  }
};
ObcAlertMenu.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcAlertMenu.prototype, "hasShelved", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertMenu.prototype, "canAckAll", 2);
__decorateClass([
  state()
], ObcAlertMenu.prototype, "_selectedTabIndex", 2);
__decorateClass([
  query("obc-alert-list")
], ObcAlertMenu.prototype, "alertList", 2);
ObcAlertMenu = __decorateClass([
  localized(),
  customElement("obc-alert-menu")
], ObcAlertMenu);
export {
  ObcAlertMenu
};
//# sourceMappingURL=alert-menu.js.map
