import { unsafeCSS, LitElement, nothing, html, svg } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./speed-arrows.css.js";
import { InstrumentFieldSize } from "../instrument-field/instrument-field.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 Direction = /* @__PURE__ */ ((Direction2) => {
  Direction2["forward"] = "forward";
  Direction2["backward"] = "backward";
  Direction2["left"] = "left";
  Direction2["right"] = "right";
  return Direction2;
})(Direction || {});
var ActiveColor = /* @__PURE__ */ ((ActiveColor2) => {
  ActiveColor2["Direction"] = "Direction";
  ActiveColor2["Regular"] = "Regular";
  ActiveColor2["Enhanced"] = "Enhanced";
  return ActiveColor2;
})(ActiveColor || {});
let ObcSpeedArrows = class extends LitElement {
  constructor() {
    super(...arguments);
    this.speedKnots = 0;
    this.readout = false;
    this.maxDigits = 2;
    this.fractionDigits = 0;
    this.nActiveArrows = 0;
    this.direction = "forward";
    this.activeColor = "Regular";
    this.tintedArrows = false;
  }
  getColors() {
    let activeFill, activeStroke, inactiveFill, inactiveStroke;
    if (this.activeColor === "Direction") {
      if (this.direction === "forward" || this.direction === "right") {
        activeFill = "var(--instrument-starboard-primary-color)";
      } else {
        activeFill = "var(--instrument-port-primary-color)";
      }
      activeStroke = "var(--border-outline-color)";
      inactiveFill = "var(--instrument-frame-secondary-color)";
      inactiveStroke = "var(--border-outline-color)";
    } else if (this.activeColor === "Regular") {
      activeFill = "var(--element-neutral-color)";
      activeStroke = activeFill;
      inactiveFill = "var(--border-outline-color)";
      inactiveStroke = inactiveFill;
    } else if (this.activeColor === "Enhanced") {
      activeFill = "var(--instrument-enhanced-secondary-color)";
      activeStroke = "var(--border-outline-color)";
      inactiveFill = "var(--instrument-frame-secondary-color)";
      inactiveStroke = "var(--border-outline-color)";
    } else {
      throw new Error("Invalid active color");
    }
    return { activeFill, activeStroke, inactiveFill, inactiveStroke };
  }
  getFillColor(active, colors) {
    if (active) {
      return colors.activeFill;
    } else {
      return colors.inactiveFill;
    }
  }
  getStrokeColor(active, colors) {
    if (active) {
      return colors.activeStroke;
    } else {
      return colors.inactiveStroke;
    }
  }
  getRotation() {
    if (this.direction === "forward") {
      return 0;
    } else if (this.direction === "backward") {
      return 180;
    } else if (this.direction === "left") {
      return 270;
    } else if (this.direction === "right") {
      return 90;
    } else {
      return 0;
    }
  }
  render() {
    const colors = this.getColors();
    return html`
      <div class="wrapper">
        ${this.readout ? html`<obc-instrument-field
              class="readout"
              .value=${this.speedKnots}
              unit="KN"
              tag="Speed"
              .size=${InstrumentFieldSize.enhanced}
              .fractionDigits=${this.fractionDigits}
              .maxDigits=${this.maxDigits}
              .neutralColor=${this.activeColor === "Regular"}
            ></obc-instrument-field>` : nothing}
        <div class="arrow-container">
          <svg
            width="96"
            height="96"
            viewBox="0 0 96 96"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g transform="rotate(${this.getRotation()}, 48, 48)">
              ${this.tintedArrows || this.nActiveArrows > 0 ? svg`
<path d="M48.0004 56L76.0004 72L76.0004 88L48.0004 72L20 88L20.0004 72L48.0004 56Z" fill=${this.getFillColor(this.nActiveArrows > 0, colors)}/>
<path d="M48.0004 56L76.0004 72L76.0004 88L48.0004 72L20 88L20.0004 72L48.0004 56Z" vector-effect="non-scaling-stroke" stroke=${this.getStrokeColor(this.nActiveArrows > 0, colors)} stroke-linecap="square"/>` : nothing}
              ${this.tintedArrows || this.nActiveArrows > 1 ? svg`
<path d="M76.0004 48L48.0004 32L20.0004 48L20 64L48.0004 48L76.0004 64L76.0004 48Z" fill=${this.getFillColor(this.nActiveArrows > 1, colors)}/>
<path d="M76.0004 48L48.0004 32L20.0004 48L20 64L48.0004 48L76.0004 64L76.0004 48Z" vector-effect="non-scaling-stroke" stroke=${this.getStrokeColor(this.nActiveArrows > 1, colors)} stroke-linecap="square"/>` : nothing}
              ${this.tintedArrows || this.nActiveArrows > 2 ? svg`
<path d="M76.0004 24L48.0004 8L20.0004 24L20 40L48.0004 24L76.0004 40L76.0004 24Z" fill=${this.getFillColor(this.nActiveArrows > 2, colors)}/>
<path d="M76.0004 24L48.0004 8L20.0004 24L20 40L48.0004 24L76.0004 40L76.0004 24Z" vector-effect="non-scaling-stroke" stroke=${this.getStrokeColor(this.nActiveArrows > 2, colors)} stroke-linecap="square"/>` : nothing}
            </g>
          </svg>
        </div>
      </div>
    `;
  }
};
ObcSpeedArrows.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcSpeedArrows.prototype, "speedKnots", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSpeedArrows.prototype, "readout", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedArrows.prototype, "maxDigits", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedArrows.prototype, "fractionDigits", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedArrows.prototype, "nActiveArrows", 2);
__decorateClass([
  property({ type: String })
], ObcSpeedArrows.prototype, "direction", 2);
__decorateClass([
  property({ type: String })
], ObcSpeedArrows.prototype, "activeColor", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSpeedArrows.prototype, "tintedArrows", 2);
ObcSpeedArrows = __decorateClass([
  customElement("obc-speed-arrows")
], ObcSpeedArrows);
export {
  ActiveColor,
  Direction,
  ObcSpeedArrows
};
//# sourceMappingURL=speed-arrows.js.map
