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 { 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 CompassDirection = /* @__PURE__ */ ((CompassDirection2) => {
  CompassDirection2["NorthUp"] = "northUp";
  CompassDirection2["HeadingUp"] = "headingUp";
  CompassDirection2["CourseUp"] = "courseUp";
  return CompassDirection2;
})(CompassDirection || {});
var HeadingPriorityElement = /* @__PURE__ */ ((HeadingPriorityElement2) => {
  HeadingPriorityElement2["hdg"] = "hdg";
  HeadingPriorityElement2["cog"] = "cog";
  return HeadingPriorityElement2;
})(HeadingPriorityElement || {});
let ObcHeading = 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.direction = "northUp";
    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;
  }
  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}
          .watchCircleType=${WatchCircleType.single}
          .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}
          .rotation=${this.getRotation()}
        >
        </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>
    `;
  }
};
ObcHeading.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 })
], ObcHeading.prototype, "heading", 2);
__decorateClass([
  property({ type: Number })
], ObcHeading.prototype, "courseOverGround", 2);
__decorateClass([
  property({ type: Number })
], ObcHeading.prototype, "headingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcHeading.prototype, "newHeadingSetpoint", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "atHeadingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcHeading.prototype, "headingSetpointAtZeroDeadband", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "headingSetpointOverride", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcHeading.prototype, "autoAtHeadingSetpoint", 2);
__decorateClass([
  property({ type: Number })
], ObcHeading.prototype, "autoAtHeadingSetpointDeadband", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "animateSetpoint", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "touching", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcHeading.prototype, "headingAdvices", 2);
__decorateClass([
  property({ type: String })
], ObcHeading.prototype, "direction", 2);
__decorateClass([
  property({ type: String })
], ObcHeading.prototype, "priority", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcHeading.prototype, "priorityElements", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "showLabels", 2);
__decorateClass([
  property({ type: Boolean })
], ObcHeading.prototype, "tickmarksInside", 2);
ObcHeading = __decorateClass([
  customElement("obc-heading")
], ObcHeading);
export {
  CompassDirection,
  HeadingPriorityElement,
  ObcHeading
};
//# sourceMappingURL=heading.js.map
