import { css, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { WatchCircleType } from "../watch/watch.js";
import { TickmarkType } from "../watch/tickmark.js";
import { arrow, ArrowStyle } from "./arrow.js";
import { AdviceState } from "../watch/advice.js";
import { ResizeController } from "@lit-labs/observers/resize-controller.js";
import { SetpointBundle } from "../../svghelpers/setpoint-bundle.js";
import { customElement } from "../../decorator.js";
import { InstrumentState, Priority } from "../types.js";
import { VesselImage, VesselImageSize } from "../watch/vessel.js";
import { RotType, RotPosition } from "../rate-of-turn/rot-renderer.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 CompassDirection = /* @__PURE__ */ ((CompassDirection2) => {
  CompassDirection2["NorthUp"] = "northUp";
  CompassDirection2["HeadingUp"] = "headingUp";
  CompassDirection2["CourseUp"] = "courseUp";
  return CompassDirection2;
})(CompassDirection || {});
var CompassPriorityElement = /* @__PURE__ */ ((CompassPriorityElement2) => {
  CompassPriorityElement2["hdg"] = "hdg";
  CompassPriorityElement2["cog"] = "cog";
  CompassPriorityElement2["rot"] = "rot";
  CompassPriorityElement2["wind"] = "wind";
  CompassPriorityElement2["current"] = "current";
  return CompassPriorityElement2;
})(CompassPriorityElement || {});
let ObcCompass = class extends LitElement {
  constructor() {
    super(...arguments);
    this.heading = 0;
    this.courseOverGround = 0;
    this.headingSetpoint = null;
    this.atHeadingSetpoint = false;
    this.headingSetpointAtZeroDeadband = 0.5;
    this.headingSetpointOverride = false;
    this.autoAtHeadingSetpoint = true;
    this.autoAtHeadingSetpointDeadband = 2;
    this.animateSetpoint = false;
    this.touching = false;
    this.headingAdvices = [];
    this.windSpeed = null;
    this.windFromDirection = null;
    this.currentSpeed = null;
    this.currentFromDirection = null;
    this.vesselImage = VesselImage.genericTop;
    this.rotationsPerMinute = 1;
    this.rotType = RotType.dots;
    this.rotPosition = RotPosition.innerCircle;
    this.rotMaxValue = 10;
    this.rotArcExtent = 60;
    this.direction = "northUp";
    this.state = InstrumentState.active;
    this.priority = Priority.regular;
    this.priorityElements = [
      "hdg"
      /* hdg */
    ];
    this.showLabels = false;
    this.tickmarksInside = false;
    this._headingSp = new SetpointBundle({
      angularWraparound: true,
      onAnimationEnd: () => this.requestUpdate()
    });
    this._resizeController = new ResizeController(this, {});
  }
  willUpdate(changed) {
    super.willUpdate(changed);
    this._headingSp.sync({
      setpoint: this.headingSetpoint ?? void 0,
      newSetpoint: this.newHeadingSetpoint,
      atSetpoint: this.atHeadingSetpoint,
      touching: this.touching,
      autoAtSetpoint: this.autoAtHeadingSetpoint,
      autoAtSetpointDeadband: this.autoAtHeadingSetpointDeadband,
      setpointAtZeroDeadband: this.headingSetpointAtZeroDeadband,
      setpointOverride: this.headingSetpointOverride,
      animateSetpoint: this.animateSetpoint
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this._headingSp.dispose();
  }
  getPadding() {
    const size = Math.min(this.clientHeight, this.clientWidth);
    const deltaWidth = 512 - size;
    const steps = deltaWidth / 128;
    let deltaPadding;
    if (deltaWidth > 0) {
      deltaPadding = steps * 48;
    } else {
      deltaPadding = steps * 6;
    }
    return 72 + deltaPadding;
  }
  get angleAdviceRaw() {
    return this.headingAdvices.map(({ minAngle, maxAngle, hinted, type }) => {
      const state = this.heading >= minAngle && this.heading <= maxAngle ? AdviceState.triggered : hinted ? AdviceState.hinted : AdviceState.regular;
      return { minAngle, maxAngle, type, state };
    });
  }
  priorityFor(element) {
    const selected = Array.isArray(this.priorityElements) ? this.priorityElements : [];
    return selected.includes(element) ? this.priority : Priority.regular;
  }
  colorFor(element) {
    return this.priorityFor(element) === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : void 0;
  }
  getRotation() {
    if (this.direction === "northUp") {
      return void 0;
    } else if (this.direction === "headingUp") {
      return -this.heading;
    } else if (this.direction === "courseUp") {
      return -this.courseOverGround;
    }
    return void 0;
  }
  render() {
    const tickmarks = [
      { angle: 0, type: TickmarkType.main },
      { angle: 90, type: TickmarkType.main },
      { angle: 180, type: TickmarkType.main },
      { angle: 270, type: TickmarkType.main }
    ];
    const padding = this.getPadding();
    const width = (176 + padding) * 2;
    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
    return html`
      <div class="container">
        <obc-watch
          .touching=${this.touching}
          .padding=${padding}
          .advices=${this.angleAdviceRaw}
          .tickmarks=${tickmarks}
          .state=${this.state}
          .watchCircleType=${WatchCircleType.triple}
          .showLabels=${this.showLabels}
          .tickmarksInside=${this.tickmarksInside}
          .crosshairEnabled=${true}
          .northArrow=${true}
          .angleSetpoint=${this.headingSetpoint ?? void 0}
          .newAngleSetpoint=${this.newHeadingSetpoint}
          .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}
          .angleSetpointAtZeroDeadband=${this.headingSetpointAtZeroDeadband}
          .setpointOverride=${this.headingSetpointOverride}
          .priority=${this.priority}
          .animateSetpoint=${this.animateSetpoint}
          .vessels=${[
      {
        size: VesselImageSize.medium,
        vesselImage: this.vesselImage,
        transform: `rotate(${this.heading}deg)`
      }
    ]}
          .wind=${this.windSpeed}
          .windFromDirectionDeg=${this.windFromDirection}
          .windColor=${this.colorFor(
      "wind"
      /* wind */
    )}
          .current=${this.currentSpeed}
          .currentFromDirectionDeg=${this.currentFromDirection}
          .currentColor=${this.colorFor(
      "current"
      /* current */
    )}
          .rotation=${this.getRotation()}
          .rotType=${this.rotType}
          .rotPosition=${this.rotPosition}
          .rotStartAngle=${this.heading + (this.getRotation() ?? 0)}
          .rotEndAngle=${this.heading + this.rotationsPerMinute / (this.rotMaxValue || 1) * this.rotArcExtent + (this.getRotation() ?? 0)}
          .rotPriority=${this.priorityFor(
      "rot"
      /* rot */
    )}
          .rotationsPerMinute=${this.rotationsPerMinute}
        >
        </obc-watch>
        <svg viewBox="${viewBox}">
          ${arrow(
      ArrowStyle.HDG,
      this.heading + (this.getRotation() ?? 0),
      this.priorityFor(
        "hdg"
        /* hdg */
      )
    )}
          ${arrow(
      ArrowStyle.COG,
      this.courseOverGround + (this.getRotation() ?? 0),
      this.priorityFor(
        "cog"
        /* cog */
      )
    )}
        </svg>
      </div>
    `;
  }
};
ObcCompass.styles = css`
    * {
      box-sizing: border-box;
    }

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

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

    :host {
      display: block;
      width: 100%;
      height: 100%;
    }
  `;
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "heading", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "courseOverGround", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "headingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "newHeadingSetpoint", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "atHeadingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "headingSetpointAtZeroDeadband", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "headingSetpointOverride", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcCompass.prototype, "autoAtHeadingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "autoAtHeadingSetpointDeadband", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "animateSetpoint", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "touching", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcCompass.prototype, "headingAdvices", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "windSpeed", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "windFromDirection", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "currentSpeed", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "currentFromDirection", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "vesselImage", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "rotationsPerMinute", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "rotType", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "rotPosition", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "rotMaxValue", 2);
__decorateClass([
  property({ type: Number })
], ObcCompass.prototype, "rotArcExtent", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "direction", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "state", 2);
__decorateClass([
  property({ type: String })
], ObcCompass.prototype, "priority", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcCompass.prototype, "priorityElements", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "showLabels", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCompass.prototype, "tickmarksInside", 2);
ObcCompass = __decorateClass([
  customElement("obc-compass")
], ObcCompass);
export {
  CompassDirection,
  CompassPriorityElement,
  ObcCompass,
  RotType
};
//# sourceMappingURL=compass.js.map
