import { LitElement, nothing, html, svg, css } from "lit";
import { property } from "lit/decorators.js";
import { TickmarkStyle, TickmarkType } from "../watch/tickmark.js";
import { WatchCircleType } from "../watch/watch.js";
import { AdviceState } from "../watch/advice.js";
import { InstrumentFieldSize } from "../instrument-field/instrument-field.js";
import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
import { Priority } from "../types.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 ObcSpeedGaugeNeedleType = /* @__PURE__ */ ((ObcSpeedGaugeNeedleType2) => {
  ObcSpeedGaugeNeedleType2["full"] = "full";
  ObcSpeedGaugeNeedleType2["bar"] = "bar";
  return ObcSpeedGaugeNeedleType2;
})(ObcSpeedGaugeNeedleType || {});
let ObcSpeedGauge = class extends SetpointMixin(LitElement) {
  constructor() {
    super(...arguments);
    this.speed = 0;
    this.maxSpeed = 100;
    this.minSpeed = 0;
    this.showLabels = false;
    this.tickmarksInside = false;
    this.tickmarkInterval = 20;
    this.priority = Priority.regular;
    this.needleType = "full";
    this.speedAdvices = [];
    this.tickmarkStyle = TickmarkStyle.regular;
    this.showReadout = false;
    this.maxAngle = 180 - 45;
  }
  getAngle(v) {
    return v / this.maxSpeed * (180 + 45) - 90;
  }
  get minAngle() {
    return this.getAngle(this.minSpeed) - 360;
  }
  render() {
    const barColor = this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
    const setpointAngle = this.setpoint !== void 0 ? this.getAngle(this.setpoint) : void 0;
    const maxDigits = this.maxSpeed.toFixed(1).length;
    return html`
      <div class="container">
        <obc-watch
          .touching=${this.touching}
          .angleSetpoint=${setpointAngle}
          .newAngleSetpoint=${this.newSetpoint !== void 0 ? this.getAngle(this.newSetpoint) : void 0}
          .atAngleSetpoint=${this.computeAtSetpoint(this.speed)}
          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
          .setpointOverride=${this.setpointOverride}
          .animateSetpoint=${this.animateSetpoint}
          .padding=${48}
          .tickmarks=${this.tickmarks}
          .tickmarksInside=${this.tickmarksInside}
          .tickmarkStyle=${this.tickmarkStyle}
          .advices=${this._advices}
          .areas=${[
      {
        startAngle: this.minAngle,
        endAngle: this.maxAngle,
        roundInsideCut: true,
        roundOutsideCut: true
      }
    ]}
          .watchCircleType=${WatchCircleType.double}
          .barAreas=${[
      {
        startAngle: this.getAngle(0),
        endAngle: this.getAngle(this.speed),
        fillColor: barColor
      }
    ]}
        ></obc-watch>
        <svg class="rudder" viewBox="-224 -224 448 448">${this.needle}</svg>
        ${this.showReadout ? html`
              <obc-instrument-field
                class="speed-gauge-value"
                .size=${InstrumentFieldSize.enhanced}
                .neutralColor=${this.priority !== Priority.enhanced}
                .value=${this.speed}
                horizontal
                unit="KN"
                tag="STW"
                .fractionDigits=${1}
                .maxDigits=${maxDigits}
              ></obc-instrument-field>
            ` : nothing}
      </div>
    `;
  }
  get needle() {
    const needleColor = this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
    if (this.needleType === "full") {
      return svg`<g transform="rotate(${this.getAngle(this.speed)}) translate(-256, -256)">
      <circle cx="256" cy="256" r="14" fill=${needleColor}/>
      <rect x="250" y="96" width="12" height="192" rx="6" fill=${needleColor}/>
      <rect x="252" y="98" width="8" height="188" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
      </svg> 
`;
    } else {
      return svg`<g transform="rotate(${this.getAngle(this.speed)}) translate(-256, -256)">
<rect x="252" y="96" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
</svg>
      `;
    }
  }
  get tickmarks() {
    const tickmarks = [];
    const interval = this.tickmarkInterval;
    if (interval !== void 0 && interval > 0 && Number.isFinite(interval)) {
      for (let i = interval; i < this.maxSpeed; i += interval) {
        tickmarks.push({
          angle: this.getAngle(i),
          type: TickmarkType.primary,
          text: this.showLabels ? i.toString() : void 0
        });
      }
      if (this.showLabels && this.maxSpeed % interval === 0) {
        tickmarks.push({
          angle: this.getAngle(this.maxSpeed),
          type: TickmarkType.textOnly,
          text: this.showLabels ? this.maxSpeed.toString() : void 0
        });
      }
      for (let i = -interval; i > this.minSpeed; i -= interval) {
        tickmarks.push({
          angle: this.getAngle(i),
          type: TickmarkType.main,
          text: this.showLabels ? i.toString() : void 0
        });
      }
      if (this.showLabels && this.minSpeed % interval === 0) {
        tickmarks.push({
          angle: this.getAngle(this.minSpeed),
          type: TickmarkType.textOnly,
          text: this.showLabels ? this.minSpeed.toString() : void 0
        });
      }
    }
    tickmarks.push({
      angle: this.getAngle(0),
      type: this.minSpeed < 0 ? TickmarkType.main : TickmarkType.textOnly,
      text: this.showLabels ? "0" : void 0
    });
    return tickmarks;
  }
  get _advices() {
    return this.speedAdvices.map((speedAdvice) => {
      const minAngle = this.getAngle(speedAdvice.minSpeed);
      const maxAngle = this.getAngle(speedAdvice.maxSpeed);
      let state = speedAdvice.hinted ? AdviceState.hinted : AdviceState.regular;
      if (this.speed >= speedAdvice.minSpeed && this.speed <= speedAdvice.maxSpeed) {
        state = AdviceState.triggered;
      }
      return {
        minAngle,
        maxAngle,
        type: speedAdvice.type,
        state,
        hideMinTickmark: speedAdvice.minSpeed === this.minSpeed,
        hideMaxTickmark: speedAdvice.maxSpeed === this.maxSpeed
      };
    });
  }
};
ObcSpeedGauge.styles = css`
    * {
      box-sizing: border-box;
    }

    .container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .container > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    obc-watch {
      anchor-name: --watch;
    }

    .speed-gauge-value {
      position: absolute;
      top: clamp(
        70%,
        calc(80% - (anchor-size(--watch height) - 200px) * 0.2),
        80%
      );
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
      height: fit-content;
    }
  `;
__decorateClass([
  property({ type: Number })
], ObcSpeedGauge.prototype, "speed", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedGauge.prototype, "maxSpeed", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedGauge.prototype, "minSpeed", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSpeedGauge.prototype, "showLabels", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSpeedGauge.prototype, "tickmarksInside", 2);
__decorateClass([
  property({ type: Number })
], ObcSpeedGauge.prototype, "tickmarkInterval", 2);
__decorateClass([
  property({ type: String })
], ObcSpeedGauge.prototype, "priority", 2);
__decorateClass([
  property({ type: String })
], ObcSpeedGauge.prototype, "needleType", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcSpeedGauge.prototype, "speedAdvices", 2);
__decorateClass([
  property({ type: String })
], ObcSpeedGauge.prototype, "tickmarkStyle", 2);
__decorateClass([
  property({ type: Boolean })
], ObcSpeedGauge.prototype, "showReadout", 2);
ObcSpeedGauge = __decorateClass([
  customElement("obc-speed-gauge")
], ObcSpeedGauge);
export {
  ObcSpeedGauge,
  ObcSpeedGaugeNeedleType
};
//# sourceMappingURL=speed-gauge.js.map
