import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./automation-tank.css.js";
import { LineMedium } from "../index.js";
import "../../icons/icon-chevron-double-up-google.js";
import "../../icons/icon-chevron-up-google.js";
import "../../icons/icon-chevron-double-down-google.js";
import "../../icons/icon-chevron-down-google.js";
import "../../icons/icon-off.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 TankTrend = /* @__PURE__ */ ((TankTrend2) => {
  TankTrend2["fastRising"] = "fast-rising";
  TankTrend2["rising"] = "rising";
  TankTrend2["stable"] = "stable";
  TankTrend2["falling"] = "falling";
  TankTrend2["fastFalling"] = "fast-falling";
  return TankTrend2;
})(TankTrend || {});
var TankVariant = /* @__PURE__ */ ((TankVariant2) => {
  TankVariant2["vertical"] = "vertical";
  TankVariant2["compact"] = "compact";
  return TankVariant2;
})(TankVariant || {});
let ObcAutomationTank = class extends LitElement {
  constructor() {
    super(...arguments);
    this.medium = LineMedium.water;
    this.value = 0;
    this.max = 100;
    this.trend = "stable";
    this.variant = "vertical";
    this.tag = "";
  }
  trendIcon() {
    if (this.trend === "fast-rising") {
      return html`<obi-chevron-double-up-google
        class="trend-icon"
      ></obi-chevron-double-up-google>`;
    } else if (this.trend === "rising") {
      return html`<obi-chevron-up-google
        class="trend-icon"
      ></obi-chevron-up-google>`;
    } else if (this.trend === "fast-falling") {
      return html`<obi-chevron-double-down-google
        class="trend-icon"
      ></obi-chevron-double-down-google>`;
    } else if (this.trend === "falling") {
      return html`<obi-chevron-down-google
        class="trend-icon"
      ></obi-chevron-down-google>`;
    } else {
      return html`<obi-off class="trend-icon"></obi-off>`;
    }
  }
  render() {
    const percent = this.value / this.max * 100;
    return html`
      <div class="outer">
        <div class="badges">
          <slot name="badges"></slot>
        </div>
        <button
          class=${classMap({
      wrapper: true,
      [this.variant]: true,
      [this.medium]: true
    })}
          style="--percent: ${percent / 100}"
        >
          <div class="bar-container">
            <div class="bar"></div>
          </div>
          <div class="content">
            <div class="header">
              ${this.trendIcon()}
              <div class="percent">
                ${percent.toFixed(0)}<span class="percent-symbol">%</span>
              </div>
            </div>
            <div class="value">
              <div class="current">
                <slot name="current-value" class="current-value"
                  >${this.value.toFixed(0)}</slot
                ><span class="divider">/</span>
              </div>
              <div class="max">
                <slot class="max-value" name="max-value"
                  >${this.max.toFixed(0)}</slot
                >
                <slot class="unit" name="unit">m<sup>3</sup></slot>
              </div>
            </div>
          </div>
        </button>
        <div class="tag"><slot name="tag">${this.tag}</slot></div>
      </div>
    `;
  }
};
ObcAutomationTank.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcAutomationTank.prototype, "medium", 2);
__decorateClass([
  property({ type: Number })
], ObcAutomationTank.prototype, "value", 2);
__decorateClass([
  property({ type: Number })
], ObcAutomationTank.prototype, "max", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationTank.prototype, "trend", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationTank.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationTank.prototype, "tag", 2);
ObcAutomationTank = __decorateClass([
  customElement("obc-automation-tank")
], ObcAutomationTank);
export {
  ObcAutomationTank,
  TankTrend,
  TankVariant
};
//# sourceMappingURL=automation-tank.js.map
