import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./automation-button.css.js";
import { classMap } from "lit/directives/class-map.js";
import "../../icons/icon-forward.js";
import "../../icons/icon-forward-fast.js";
import "../../icons/icon-forward-stopped.js";
import "../../icons/icon-backward.js";
import "../../icons/icon-backward-fast.js";
import "../../icons/icon-backward-stopped.js";
import "../../icons/icon-standby.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 { ObcAlertFrameType, ObcAlertFrameThickness, ObcAlertFrameStatus } from "../../components/alert-frame/alert-frame.js";
import { customElement } from "../../decorator.js";
import { AutomationButtonReadoutStackSize, IdTagOrientation } from "../../components/automation-button-readout-stack/automation-button-readout-stack.js";
import { CircularProgressMode } from "../../building-blocks/circular-progress/circular-progress.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 AutomationButtonVariant = /* @__PURE__ */ ((AutomationButtonVariant2) => {
  AutomationButtonVariant2["regular"] = "regular";
  AutomationButtonVariant2["double"] = "double";
  AutomationButtonVariant2["square"] = "square";
  AutomationButtonVariant2["flat"] = "flat";
  return AutomationButtonVariant2;
})(AutomationButtonVariant || {});
var AutomationButtonState = /* @__PURE__ */ ((AutomationButtonState2) => {
  AutomationButtonState2["closed"] = "closed";
  AutomationButtonState2["open"] = "open";
  return AutomationButtonState2;
})(AutomationButtonState || {});
var AutomationButtonReadoutPosition = /* @__PURE__ */ ((AutomationButtonReadoutPosition2) => {
  AutomationButtonReadoutPosition2["top"] = "top";
  AutomationButtonReadoutPosition2["bottom"] = "bottom";
  AutomationButtonReadoutPosition2["left"] = "left";
  AutomationButtonReadoutPosition2["right"] = "right";
  return AutomationButtonReadoutPosition2;
})(AutomationButtonReadoutPosition || {});
var AutomationButtonDirection = /* @__PURE__ */ ((AutomationButtonDirection2) => {
  AutomationButtonDirection2["forward"] = "forward";
  AutomationButtonDirection2["forwardFast"] = "forward-fast";
  AutomationButtonDirection2["forwardStopped"] = "forward-stopped";
  AutomationButtonDirection2["backward"] = "backward";
  AutomationButtonDirection2["backwardFast"] = "backward-fast";
  AutomationButtonDirection2["backwardStopped"] = "backward-stopped";
  AutomationButtonDirection2["standby"] = "standby";
  return AutomationButtonDirection2;
})(AutomationButtonDirection || {});
var AutomationButtonLabelDirection = /* @__PURE__ */ ((AutomationButtonLabelDirection2) => {
  AutomationButtonLabelDirection2["up"] = "up";
  AutomationButtonLabelDirection2["down"] = "down";
  AutomationButtonLabelDirection2["left"] = "left";
  AutomationButtonLabelDirection2["right"] = "right";
  return AutomationButtonLabelDirection2;
})(AutomationButtonLabelDirection || {});
var AutomationButtonPositioning = /* @__PURE__ */ ((AutomationButtonPositioning2) => {
  AutomationButtonPositioning2["point"] = "point";
  AutomationButtonPositioning2["symbol"] = "symbol";
  AutomationButtonPositioning2["button"] = "button";
  return AutomationButtonPositioning2;
})(AutomationButtonPositioning || {});
let ObcAutomationButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.variant = "regular";
    this.state = "open";
    this.static = false;
    this.showReadoutStack = true;
    this.readouts = [];
    this.tag = null;
    this.hasIdTag = false;
    this.readoutPosition = "bottom";
    this.readoutSize = AutomationButtonReadoutStackSize.regular;
    this.alert = false;
    this.alertFrameType = ObcAlertFrameType.SmallSideFlip;
    this.alertFrameThickness = ObcAlertFrameThickness.Small;
    this.alertFrameStatus = ObcAlertFrameStatus.Alarm;
    this.showAlertCategoryIcon = true;
    this.showAlertIcon = false;
    this.progress = false;
    this.progressMode = CircularProgressMode.indeterminate;
    this.progressValue = 0;
    this.direction = "forward";
    this.positioning = "point";
    this.hasBadgeSpacer = false;
  }
  render() {
    const effectiveVariant = this.progress ? "regular" : this.variant;
    const progressRing = this.getProgressRing();
    const direction = this.getDirectionIcon(effectiveVariant);
    const resolvedTag = this.hasIdTag ? this.tag ?? { value: 0 } : null;
    const hasLabelContent = this.showReadoutStack && (this.readouts.length > 0 || this.hasIdTag);
    return this.wrapContent(html`
      <button
        class=${classMap({
      wrapper: true,
      ["positioning-" + this.positioning]: true,
      ["variant-" + effectiveVariant]: true,
      ["state-" + this.state]: true,
      "label-empty": !hasLabelContent,
      ["label-" + this.readoutPosition]: true,
      "has-badge-spacer": this.hasBadgeSpacer,
      alert: this.alert,
      progress: this.progress,
      static: this.static
    })}
      >
        <div class="icon-touch-target">
          <div class="icon-holder">
            ${direction}
            <div class="icon-primary">
              <slot name="icon"></slot>
            </div>
            ${effectiveVariant === "flat" ? html` <div class="icon-silhouette">
                  <slot name="icon-silhouette"></slot>
                </div>` : nothing}
            ${progressRing}
          </div>
          <div class="badge-top-right">
            <slot name="badge-top-right"></slot>
          </div>
          <div class="badge-top-left">
            <slot name="badge-top-left"></slot>
          </div>
          <div class="badge-bottom-left">
            <slot name="badge-bottom-left"></slot>
          </div>
          <div class="badge-bottom-right">
            <slot name="badge-bottom-right"></slot>
          </div>
        </div>
        ${this.showReadoutStack ? html`
              <div class="badge-spacer"></div>
              <obc-automation-button-readout-stack
                .readouts=${this.readouts}
                .tag=${resolvedTag}
                .hasIdTag=${this.hasIdTag}
                .size=${this.readoutSize}
                .idTagOrientation=${this.getIdTagOrientation()}
              ></obc-automation-button-readout-stack>
            ` : nothing}
        ${this.alert ? html` <obc-alert-frame
              class="alert-frame"
              .type=${this.alertFrameType}
              .thickness=${this.alertFrameThickness}
              .status=${this.alertFrameStatus}
              .showAlertCategoryIcon=${this.showAlertCategoryIcon}
              .showIcon=${this.showAlertIcon}
            >
              <span slot="icon"><slot name="alert-icon"></slot></span>
              <span slot="label"><slot name="alert-label"></slot></span>
              <span slot="timer"><slot name="alert-timer"></slot></span>
            </obc-alert-frame>` : nothing}
      </button>
    `);
  }
  wrapContent(content) {
    if (this.positioning === "point") {
      return html`<div class="point-wrapper">${content}</div>`;
    } else if (this.positioning === "symbol") {
      return html`<div
        class=${classMap({
        "symbol-wrapper": true,
        ["label-" + this.readoutPosition]: true
      })}
      >
        ${content}
      </div> `;
    }
    return content;
  }
  getProgressRing() {
    if (!this.progress) {
      return null;
    }
    return html`<obc-circular-progress
      class="progress-ring"
      .mode=${this.progressMode}
      .value=${this.progressValue}
    ></obc-circular-progress>`;
  }
  getDirectionIcon(variant) {
    if (variant !== "double") {
      return null;
    } else if (this.direction === "forward") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8 5 v 14 L 20 12Z"
          stroke="var(--automation-device-tertiary-color)"
          fill="var(--automation-device-primary-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg> `;
    } else if (this.direction === "forward-fast") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M3.5 5 v 14 l 8.5 -7 Z M14.5 5 v 14 l 8.5 -7 Z"
          stroke="var(--automation-device-tertiary-color)"
          fill="var(--automation-device-primary-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg> `;
    } else if (this.direction === "forward-stopped") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M8 5 v 14 L 20 12Z"
          fill="var(--automation-device-tertiary-color)"
          stroke="var(--automation-device-tertiary-inverted-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg> `;
    } else if (this.direction === "backward") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16 5 v 14 L 4 12Z"
          stroke="var(--automation-device-tertiary-color)"
          fill="var(--automation-device-primary-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg>`;
    } else if (this.direction === "backward-fast") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M20.5 5 v 14 l -8.5 -7 Z M9.5 5 v 14 l -8.5 -7 Z"
          stroke="var(--automation-device-tertiary-color)"
          fill="var(--automation-device-primary-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg>`;
    } else if (this.direction === "backward-stopped") {
      return html`<svg
        class="icon-direction"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16 5 v 14 L 4 12Z"
          fill="var(--automation-device-tertiary-color)"
          stroke="var(--automation-device-tertiary-inverted-color)"
          vector-effect="non-scaling-stroke"
        />
      </svg> `;
    } else if (this.direction === "standby") {
      return html`<obi-standby
        class="icon-direction"
        usecsscolor
      ></obi-standby>`;
    }
    throw new Error("Invalid direction");
  }
  getIdTagOrientation() {
    if (this.readoutPosition === "top") {
      return IdTagOrientation.top;
    }
    return IdTagOrientation.bottom;
  }
};
ObcAutomationButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "static", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcAutomationButton.prototype, "showReadoutStack", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcAutomationButton.prototype, "readouts", 2);
__decorateClass([
  property({ attribute: false })
], ObcAutomationButton.prototype, "tag", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "hasIdTag", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "readoutPosition", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "readoutSize", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "alert", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "alertFrameType", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "alertFrameThickness", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "alertFrameStatus", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcAutomationButton.prototype, "showAlertCategoryIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "showAlertIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "progress", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "progressMode", 2);
__decorateClass([
  property({ type: Number })
], ObcAutomationButton.prototype, "progressValue", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "direction", 2);
__decorateClass([
  property({ type: String })
], ObcAutomationButton.prototype, "positioning", 2);
__decorateClass([
  property({ type: Boolean })
], ObcAutomationButton.prototype, "hasBadgeSpacer", 2);
ObcAutomationButton = __decorateClass([
  customElement("obc-automation-button")
], ObcAutomationButton);
export {
  AutomationButtonDirection,
  AutomationButtonLabelDirection,
  AutomationButtonPositioning,
  AutomationButtonReadoutPosition,
  AutomationButtonState,
  AutomationButtonVariant,
  CircularProgressMode,
  ObcAutomationButton
};
//# sourceMappingURL=automation-button.js.map
