import { unsafeCSS, LitElement, html } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./integration-fleet-button.css.js";
import { property } from "lit/decorators.js";
import { msg } from "@lit/localize";
import "../../components/badge/badge.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 ObcIntegrationFleetButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.selected = false;
    this.fleetName = "";
    this.status = "";
    this.readouts = [];
    this.alertTopic = "";
    this.alerts = { alarm: 0, warning: 0, caution: 0 };
  }
  render() {
    const hasAlert = this.alerts.alarm > 0 || this.alerts.warning > 0 || this.alerts.caution > 0;
    return html`
      <button class="wrapper ${this.selected ? "selected" : ""}">
        <div class="header">
          <div class="fleet-name">${this.fleetName}</div>
          <div class="status">${this.status}</div>
        </div>
        <div class="content">
          <div class="readouts">
            ${this.readouts.map(
      (readout) => html`<div class="readout">
                  <div class="readout-label">${readout.label}</div>
                  <div class="readout-value">${readout.value}</div>
                  <div class="readout-unit">${readout.unit}</div>
                </div>`
    )}
          </div>
          <div class="alerts ${hasAlert ? "has-alert" : "no-alert"}">
            <div class="alert-icon ">
              <slot name="alert-topic-icon"></slot>
            </div>
            <div class="alert-topic">${this.alertTopic}</div>
            <div class="alert-counts">
              ${hasAlert ? this.renderAlertCount() : msg("No alerts")}
            </div>
          </div>
        </div>
      </button>
    `;
  }
  renderAlertCount() {
    const { alarm, warning, caution } = this.alerts;
    const divs = [];
    if (alarm > 0) {
      divs.push(
        html`<obc-badge
          type="alarm"
          .number="${alarm}"
          size="large"
        ></obc-badge>`
      );
    }
    if (warning > 0) {
      divs.push(
        html`<obc-badge
          type="warning"
          .number="${warning}"
          size="large"
        ></obc-badge>`
      );
    }
    if (caution > 0) {
      divs.push(
        html`<obc-badge
          type="caution"
          .number="${caution}"
          size="large"
        ></obc-badge>`
      );
    }
    return divs;
  }
};
ObcIntegrationFleetButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationFleetButton.prototype, "selected", 2);
__decorateClass([
  property({ type: String })
], ObcIntegrationFleetButton.prototype, "fleetName", 2);
__decorateClass([
  property({ type: String })
], ObcIntegrationFleetButton.prototype, "status", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcIntegrationFleetButton.prototype, "readouts", 2);
__decorateClass([
  property({ type: String })
], ObcIntegrationFleetButton.prototype, "alertTopic", 2);
__decorateClass([
  property({ type: Object, attribute: false })
], ObcIntegrationFleetButton.prototype, "alerts", 2);
ObcIntegrationFleetButton = __decorateClass([
  customElement("obc-integration-fleet-button")
], ObcIntegrationFleetButton);
export {
  ObcIntegrationFleetButton
};
//# sourceMappingURL=integration-fleet-button.js.map
