import { unsafeCSS, LitElement, html, nothing } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./automation-button-readout-stack.css.js";
import { property } from "lit/decorators.js";
import "../../icons/icon-arrow-up-google.js";
import "../../icons/icon-arrow-down-google.js";
import "../../icons/icon-arrow-left-google.js";
import "../../icons/icon-arrow-right-google.js";
import "../../icons/icon-chevron-double-up-google.js";
import "../../icons/icon-chevron-double-down-google.js";
import "../../icons/icon-chevron-double-left-google.js";
import "../../icons/icon-chevron-double-right-google.js";
import "../../icons/icon-off.js";
import "../../icons/icon-on.js";
import "../../icons/icon-temperature-air.js";
import "../button/button.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 AutomationButtonReadoutStackSize = /* @__PURE__ */ ((AutomationButtonReadoutStackSize2) => {
  AutomationButtonReadoutStackSize2["small"] = "small";
  AutomationButtonReadoutStackSize2["regular"] = "regular";
  AutomationButtonReadoutStackSize2["enhanced"] = "enhanced";
  return AutomationButtonReadoutStackSize2;
})(AutomationButtonReadoutStackSize || {});
var IdTagOrientation = /* @__PURE__ */ ((IdTagOrientation2) => {
  IdTagOrientation2["top"] = "top";
  IdTagOrientation2["bottom"] = "bottom";
  return IdTagOrientation2;
})(IdTagOrientation || {});
let ObcAutomationButtonReadoutStack = class extends LitElement {
  constructor() {
    super(...arguments);
    this.readouts = [];
    this.tag = null;
    this.size = "regular";
    this.idTagOrientation = "top";
    this.hasIdTag = false;
  }
  renderTag() {
    if (!this.hasIdTag || !this.tag) return html``;
    const paddedValue = this.tag.value.toString().padStart(4, "0");
    return html`<div class="tag">#${paddedValue}</div>`;
  }
  renderValueContainer(type, icon, content) {
    return html`<div class="readout-item ${type}">
      ${icon}
      <div class="value-container">
        <div class="label-container">${content}</div>
      </div>
    </div>`;
  }
  renderValueText(text) {
    return html`<span class="value-text">${text}</span>`;
  }
  renderValue(readout) {
    const v = readout.value.toFixed(0);
    const zeroPadding = v.length < readout.nDigits ? "0".repeat(readout.nDigits - v.length) : "";
    const paddedValue = zeroPadding + v;
    let directionIcon = nothing;
    if (readout.icon == "arrow") {
      if (readout.direction == "up") {
        directionIcon = html`<obi-arrow-up-google
          class="icon"
          useCssColor
        ></obi-arrow-up-google>`;
      } else if (readout.direction == "down") {
        directionIcon = html`<obi-arrow-down-google
          class="icon"
          useCssColor
        ></obi-arrow-down-google>`;
      } else if (readout.direction == "left") {
        directionIcon = html`<obi-arrow-left-google
          class="icon"
          useCssColor
        ></obi-arrow-left-google>`;
      } else if (readout.direction == "right") {
        directionIcon = html`<obi-arrow-right-google
          class="icon"
          useCssColor
        ></obi-arrow-right-google>`;
      }
    } else if (readout.icon == "chevron") {
      if (readout.direction == "up") {
        directionIcon = html`<obi-chevron-double-up-google
          class="icon"
          useCssColor
        ></obi-chevron-double-up-google>`;
      } else if (readout.direction == "down") {
        directionIcon = html`<obi-chevron-double-down-google
          class="icon"
          useCssColor
        ></obi-chevron-double-down-google>`;
      } else if (readout.direction == "left") {
        directionIcon = html`<obi-chevron-double-left-google
          class="icon"
          useCssColor
        ></obi-chevron-double-left-google>`;
      } else if (readout.direction == "right") {
        directionIcon = html`<obi-chevron-double-right-google
          class="icon"
          useCssColor
        ></obi-chevron-double-right-google>`;
      }
    }
    const content = html`
      ${this.renderValueText(paddedValue)}
      <span class="unit">${readout.unit}</span>
    `;
    return this.renderValueContainer("value", directionIcon, content);
  }
  renderStateOff(readout) {
    let offIcon = html``;
    if (readout.hasIcon) {
      offIcon = html`<obi-off class="icon" useCssColor></obi-off>`;
    }
    const content = this.renderValueText(readout.value);
    return this.renderValueContainer("state-off", offIcon, content);
  }
  renderStateOn(readout) {
    let onIcon = html``;
    if (readout.hasIcon) {
      onIcon = html`<obi-on class="icon" useCssColor></obi-on>`;
    }
    const content = this.renderValueText(readout.value);
    return this.renderValueContainer("state-on", onIcon, content);
  }
  renderButton(readout) {
    const v = readout.value.toFixed(1);
    let temperatureIcon = html``;
    if (readout.hasIcon) {
      temperatureIcon = html`<obi-temperature-air
        class="icon"
        useCssColor
      ></obi-temperature-air>`;
    }
    const content = html`
      ${this.renderValueText(v)}
      <span class="unit">${readout.unit}</span>
    `;
    return html`<obc-button class="readout-button" part="readout-button">
      ${this.renderValueContainer("button", temperatureIcon, content)}
    </obc-button>`;
  }
  renderReadout(readout) {
    if (readout.type === "value") {
      return this.renderValue(readout);
    } else if (readout.type === "state-on") {
      return this.renderStateOn(readout);
    } else if (readout.type === "state-off") {
      return this.renderStateOff(readout);
    } else if (readout.type === "button") {
      return this.renderButton(readout);
    } else {
      throw new Error("Invalid readout type");
    }
  }
  render() {
    const displayableReadouts = this.readouts.filter(
      (readout) => readout.type === "value" || readout.type === "state-off" || readout.type === "state-on" || readout.type === "button"
    );
    const renderedReadouts = displayableReadouts.map(
      (r) => this.renderReadout(r)
    );
    const tag = this.renderTag();
    const elements = [];
    if (this.idTagOrientation === "top") {
      if (this.hasIdTag) elements.push(tag);
      elements.push(...renderedReadouts);
    } else {
      elements.push(...renderedReadouts);
      if (this.hasIdTag) elements.push(tag);
    }
    return html`<div class="readout-stack ${this.size}">${elements}</div>`;
  }
};
ObcAutomationButtonReadoutStack.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ attribute: false })
], ObcAutomationButtonReadoutStack.prototype, "readouts", 2);
__decorateClass([
  property({ attribute: false })
], ObcAutomationButtonReadoutStack.prototype, "tag", 2);
__decorateClass([
  property()
], ObcAutomationButtonReadoutStack.prototype, "size", 2);
__decorateClass([
  property()
], ObcAutomationButtonReadoutStack.prototype, "idTagOrientation", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButtonReadoutStack.prototype, "hasIdTag", 2);
ObcAutomationButtonReadoutStack = __decorateClass([
  customElement("obc-automation-button-readout-stack")
], ObcAutomationButtonReadoutStack);
export {
  AutomationButtonReadoutStackSize,
  IdTagOrientation,
  ObcAutomationButtonReadoutStack
};
//# sourceMappingURL=automation-button-readout-stack.js.map
