import { LitElement, nothing, svg, html, css } from "lit";
import { property } from "lit/decorators.js";
import { innerRingRadiusFor, WatchCircleType, OUTER_RING_RADIUS } from "../watch/watch.js";
import { TickmarkStyle, TickmarkType } from "../watch/tickmark.js";
import { InstrumentState, Priority } from "../types.js";
import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
import { AdviceState } from "../watch/advice.js";
import { customElement } from "../../decorator.js";
import { computeZoomToFitArcFrame } from "../../svghelpers/arc-frame.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 ObcRudderVariant = /* @__PURE__ */ ((ObcRudderVariant2) => {
  ObcRudderVariant2["Bar"] = "bar";
  ObcRudderVariant2["Needle"] = "needle";
  return ObcRudderVariant2;
})(ObcRudderVariant || {});
let ObcRudder = class extends SetpointMixin(LitElement) {
  constructor() {
    super(...arguments);
    this.angle = 0;
    this.variant = "bar";
    this.maxAngle = 90;
    this.showLabels = false;
    this.tickmarksInside = false;
    this.state = InstrumentState.active;
    this.priority = Priority.regular;
    this.tickmarkStyle = TickmarkStyle.regular;
    this.advices = [];
    this.zoomToFitArc = false;
    this._radiusOffset = 0;
  }
  get _needleTransform() {
    const rOff = this._radiusOffset;
    if (rOff > 0) {
      return `translate(-256, -256) rotate(${-this.angle} 256 256) translate(0, ${rOff})`;
    }
    return `translate(-256, -256) rotate(${-this.angle} 256 256)`;
  }
  getAngle(value) {
    return 180 - value;
  }
  get barColor() {
    if (this.variant === "needle") {
      if (this.state === InstrumentState.loading || this.state === InstrumentState.off) {
        return "var(--instrument-frame-tertiary-color)";
      }
      return this.priority === Priority.enhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)";
    } else {
      if (this.state === InstrumentState.loading || this.state === InstrumentState.off) {
        return "var(--instrument-frame-tertiary-color)";
      }
      return this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
    }
  }
  renderNeedle() {
    if (this.variant === "bar") {
      return nothing;
    }
    let color;
    if (this.state === InstrumentState.loading || this.state === InstrumentState.off) {
      color = "var(--instrument-frame-tertiary-color)";
    } else {
      color = this.priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
    }
    return svg`
      <path
        transform="${this._needleTransform}"
        d="M260.462 411.447C259.81 416.73 251.933 416.645 251.514 411.191L239.826 259.24C239.618 258.192 239.508 257.109 239.508 256C239.508 255.764 239.514 255.528 239.524 255.294L239.503 255.039L239.462 254.5H239.576C240.334 246.09 247.401 239.5 256.008 239.5C264.615 239.5 271.681 246.09 272.439 254.5H272.542L272.5 255.039L272.488 255.196C272.501 255.462 272.508 255.731 272.508 256C272.508 257.144 272.391 258.261 272.169 259.339L260.487 411.191L260.462 411.447Z"
        fill="${color}"
        stroke="var(--border-silhouette-color)"
      />
    `;
  }
  render() {
    const maxAngle = Math.max(2, this.maxAngle);
    const areas = [
      {
        startAngle: 180 - maxAngle,
        endAngle: 180 + maxAngle,
        roundInsideCut: true,
        roundOutsideCut: true
      }
    ];
    const barAreas = [
      {
        startAngle: this.getAngle(0),
        endAngle: this.getAngle(this.angle),
        fillColor: this.barColor
      }
    ];
    const setpointAngle = this.setpoint !== void 0 ? 180 - this.setpoint : void 0;
    const tickmarks = [
      {
        angle: 180,
        type: TickmarkType.primary,
        text: this.showLabels ? "0" : void 0
      },
      {
        angle: 180,
        type: TickmarkType.zeroLineThick,
        color: this.barColor
      },
      {
        angle: 180 - maxAngle,
        type: TickmarkType.secondary,
        text: this.showLabels ? maxAngle.toFixed(0) : void 0
      },
      {
        angle: 180 + maxAngle,
        type: TickmarkType.secondary,
        text: this.showLabels ? (-maxAngle).toFixed(0) : void 0
      }
    ];
    let helpAngle = null;
    if (maxAngle > 70) {
      helpAngle = 45;
    } else if (maxAngle > 50) {
      helpAngle = 30;
    } else if (maxAngle > 40) {
      helpAngle = 22.5;
    }
    if (helpAngle !== null) {
      tickmarks.push({ angle: 180 - helpAngle, type: TickmarkType.primary });
      tickmarks.push({ angle: 180 + helpAngle, type: TickmarkType.primary });
    }
    const advices = this.advices.map((adv) => {
      const startAngle = 180 - adv.maxAngle;
      const endAngle = 180 - adv.minAngle;
      const isInRange = this.setpoint !== void 0 && this.setpoint >= adv.minAngle && this.setpoint <= adv.maxAngle;
      let state;
      if (isInRange) {
        state = AdviceState.triggered;
      } else if (adv.hinted) {
        state = AdviceState.hinted;
      } else {
        state = AdviceState.regular;
      }
      return {
        minAngle: startAngle,
        maxAngle: endAngle,
        type: adv.type,
        state
      };
    });
    let overlayViewBox;
    if (this.zoomToFitArc) {
      const ext = 48;
      const targetSize = (176 + ext) * 2;
      const frame = computeZoomToFitArcFrame({
        areas,
        outerRadius: OUTER_RING_RADIUS,
        innerRadius: innerRingRadiusFor(WatchCircleType.double),
        extension: ext,
        targetSize
      });
      overlayViewBox = frame.viewBox;
      this._radiusOffset = frame.radiusOffset;
      this._arcFrame = frame;
    } else {
      overlayViewBox = "-224 -44.8 448 268.8";
      this._radiusOffset = 0;
      this._arcFrame = void 0;
    }
    return html`
      <div class="container">
        <obc-watch
          .touching=${this.touching}
          .clipTop=${this.zoomToFitArc ? 0 : 40}
          .zoomToFitArc=${this.zoomToFitArc}
          .arcFrame=${this._arcFrame}
          .areas=${areas}
          .angleSetpoint=${setpointAngle}
          .newAngleSetpoint=${this.newSetpoint !== void 0 ? 180 - this.newSetpoint : void 0}
          .atAngleSetpoint=${this.computeAtSetpoint(this.angle)}
          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
          .setpointOverride=${this.setpointOverride}
          .animateSetpoint=${this.animateSetpoint}
          .padding=${48}
          .tickmarks=${tickmarks}
          .tickmarksInside=${this.tickmarksInside}
          .tickmarkStyle=${this.tickmarkStyle}
          .watchCircleType=${WatchCircleType.double}
          .barAreas=${barAreas}
          .state=${this.state}
          .priority=${this.priority}
          .advices=${advices}
        ></obc-watch>
        <svg viewBox="${overlayViewBox}">${this.renderNeedle()}</svg>
      </div>
    `;
  }
};
ObcRudder.styles = css`
    * {
      box-sizing: border-box;
    }

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

    .container > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  `;
__decorateClass([
  property({ type: Number })
], ObcRudder.prototype, "angle", 2);
__decorateClass([
  property({ type: String })
], ObcRudder.prototype, "variant", 2);
__decorateClass([
  property({ type: Number })
], ObcRudder.prototype, "maxAngle", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRudder.prototype, "showLabels", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRudder.prototype, "tickmarksInside", 2);
__decorateClass([
  property({ type: String })
], ObcRudder.prototype, "state", 2);
__decorateClass([
  property({ type: String })
], ObcRudder.prototype, "priority", 2);
__decorateClass([
  property({ type: String })
], ObcRudder.prototype, "tickmarkStyle", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcRudder.prototype, "advices", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRudder.prototype, "zoomToFitArc", 2);
ObcRudder = __decorateClass([
  customElement("obc-rudder")
], ObcRudder);
export {
  ObcRudder,
  ObcRudderVariant
};
//# sourceMappingURL=rudder.js.map
