import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import compentStyle from "./alert-button.css.js";
import "../../icons/icon-alerts.js";
import "../../icons/icon-alerts-active.js";
import "../../icons/icon-notification.js";
import "../../icons/icon-notification-filled.js";
import "../../icons/icon-notification-advice.js";
import "../../icons/icon-notification-advice-active.js";
import "../../icons/icon-silence-iec.js";
import "../../icons/icon-alerts-alarm-twotone.js";
import "../../icons/icon-alerts-warning-twotone.js";
import "../../icons/icon-alerts-caution-twotone.js";
import { AlertType } from "../../types.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.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 ObcAlertButtonType = /* @__PURE__ */ ((ObcAlertButtonType2) => {
  ObcAlertButtonType2["Flat"] = "flat";
  ObcAlertButtonType2["Normal"] = "normal";
  ObcAlertButtonType2["Enhanced"] = "enhanced";
  return ObcAlertButtonType2;
})(ObcAlertButtonType || {});
let ObcAlertButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.nAlerts = 0;
    this.type = "normal";
    this.large = false;
    this.showSilenceButton = false;
    this.silenceButtonDisabled = false;
    this.counter = false;
    this.blinking = false;
    this.flatMaxBreakpointPx = 0;
    this.silenceButtonMinBreakpointPx = 0;
    this.width = window.innerWidth;
    this.resizeListener = () => {
      this.width = window.innerWidth;
    };
  }
  connectedCallback() {
    super.connectedCallback();
    window.addEventListener("resize", this.resizeListener);
  }
  disconnectedCallback() {
    window.removeEventListener("resize", this.resizeListener);
    super.disconnectedCallback();
  }
  alertIcon() {
    const isIdle = this.nAlerts === 0;
    if (isIdle) {
      return html`<obi-alerts class="icon"></obi-alerts>`;
    } else {
      if (this.type === "enhanced") {
        return html`<obi-alerts-active class="icon"></obi-alerts-active>`;
      } else if (this.alertType === AlertType.Alarm) {
        return html`<obi-alerts-alarm-twotone
          useCssColor
          class="icon"
        ></obi-alerts-alarm-twotone>`;
      } else if (this.alertType === AlertType.Warning) {
        return html`<obi-alerts-warning-twotone
          useCssColor
          class="icon"
        ></obi-alerts-warning-twotone>`;
      } else {
        return html`<obi-alerts-caution-twotone
          useCssColor
          class="icon"
        ></obi-alerts-caution-twotone>`;
      }
    }
  }
  alertIconNegative() {
    const useIdle = this.nAlerts === 0 || this.type !== "enhanced";
    if (useIdle) {
      return html`<obi-alerts class="icon"></obi-alerts>`;
    } else if (this.alertType === AlertType.Alarm) {
      return html`<obi-alerts-alarm-twotone
        useCssColor
        class="icon"
      ></obi-alerts-alarm-twotone>`;
    } else if (this.alertType === AlertType.Warning) {
      return html`<obi-alerts-warning-twotone
        useCssColor
        class="icon"
      ></obi-alerts-warning-twotone>`;
    } else {
      return html`<obi-alerts-caution-twotone
        useCssColor
        class="icon"
      ></obi-alerts-caution-twotone>`;
    }
  }
  get activeType() {
    if (this.type === "flat") {
      return "flat";
    }
    if (this.width < this.flatMaxBreakpointPx) {
      return "flat";
    }
    return this.type;
  }
  get showSilenceButtonDynamic() {
    return this.showSilenceButton && this.width >= this.silenceButtonMinBreakpointPx && this.activeType !== "flat";
  }
  render() {
    const hasAlerts = this.nAlerts > 0;
    const showCounter = this.counter && hasAlerts && this.activeType !== "flat";
    const showBlinking = this.blinking && hasAlerts && this.alertType !== AlertType.Caution;
    return html`
      <div
        class=${classMap({
      wrapper: true,
      [`alert-type-${this.alertType ?? "none"}`]: true,
      counter: showCounter,
      "has-silence": this.showSilenceButtonDynamic,
      [`type-${this.activeType}`]: true,
      blinking: showBlinking,
      large: this.large
    })}
      >
        <button
          class="alert-button"
          @click=${() => this.dispatchEvent(new CustomEvent("click-alert"))}
        >
          ${showBlinking ? html` <div class="blink">
                ${this.alertIconNegative()}
                ${showCounter ? html`<div class="badge">${this.nAlerts}</div>` : null}
              </div>` : nothing}
          <div class="visible-wrapper">
            ${this.alertIcon()}
            ${showCounter ? html`<div class="badge">${this.nAlerts}</div>` : nothing}
          </div>
        </button>

        ${this.showSilenceButtonDynamic ? html`
              <button
                class="silence-button"
                @click=${() => this.dispatchEvent(new CustomEvent("click-silence"))}
                ?disabled=${this.silenceButtonDisabled}
              >
                <div class="visible-wrapper">
                  <obi-silence-iec class="icon"></obi-silence-iec>
                </div>
              </button>
            ` : null}
      </div>
    `;
  }
};
ObcAlertButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcAlertButton.prototype, "nAlerts", 2);
__decorateClass([
  property({ type: String })
], ObcAlertButton.prototype, "alertType", 2);
__decorateClass([
  property({ type: String })
], ObcAlertButton.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertButton.prototype, "large", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertButton.prototype, "showSilenceButton", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertButton.prototype, "silenceButtonDisabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertButton.prototype, "counter", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAlertButton.prototype, "blinking", 2);
__decorateClass([
  property({ type: Number })
], ObcAlertButton.prototype, "flatMaxBreakpointPx", 2);
__decorateClass([
  property({ type: Number })
], ObcAlertButton.prototype, "silenceButtonMinBreakpointPx", 2);
__decorateClass([
  state()
], ObcAlertButton.prototype, "width", 2);
ObcAlertButton = __decorateClass([
  customElement("obc-alert-button")
], ObcAlertButton);
export {
  ObcAlertButton,
  ObcAlertButtonType
};
//# sourceMappingURL=alert-button.js.map
