import { unsafeCSS, LitElement, svg, html } from "lit";
import componentStyle from "./compass-flat.css.js";
import { property, state } from "lit/decorators.js";
import { TickmarkType } from "../watch-flat/tickmark-flat.js";
import "../watch-flat/watch-flat.js";
import { customElement } from "../../decorator.js";
import { Priority } from "../types.js";
import { LINEAR_DOT_ANGLE_SPACING } from "../rate-of-turn/rot-renderer.js";
import { RotType } 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 CompassFlatPriorityElement = /* @__PURE__ */ ((CompassFlatPriorityElement2) => {
  CompassFlatPriorityElement2["hdg"] = "hdg";
  CompassFlatPriorityElement2["cog"] = "cog";
  CompassFlatPriorityElement2["rot"] = "rot";
  return CompassFlatPriorityElement2;
})(CompassFlatPriorityElement || {});
var LabelPosition = /* @__PURE__ */ ((LabelPosition2) => {
  LabelPosition2[LabelPosition2["top"] = -45] = "top";
  LabelPosition2[LabelPosition2["bottom"] = 50] = "bottom";
  return LabelPosition2;
})(LabelPosition || {});
var LabelStyle = /* @__PURE__ */ ((LabelStyle2) => {
  LabelStyle2["regular"] = "var(--instrument-tick-mark-secondary-color)";
  return LabelStyle2;
})(LabelStyle || {});
let ObcCompassFlat = class extends LitElement {
  constructor() {
    super(...arguments);
    this.FOVIndicator = false;
    this.heading = 0;
    this.courseOverGround = 0;
    this.tickInterval = 5;
    this.FOV = 45;
    this.minFOV = 45;
    this.maxFOV = 180;
    this.priority = Priority.regular;
    this.priorityElements = [
      "hdg"
      /* hdg */
    ];
    this.rotationsPerMinute = 1;
    this.rotMaxValue = 10;
    this.rotArcExtent = 60;
    this.containerWidth = 0;
    this.maxContainerWidth = 0;
    this.resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        this.maxContainerWidth = -125.36 + 3.79 * entry.contentRect.height;
        this.containerWidth = Math.min(
          entry.contentRect.width,
          this.maxContainerWidth
        );
      }
    });
  }
  connectedCallback() {
    super.connectedCallback();
    this.resizeObserver.observe(this);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.resizeObserver.unobserve(this);
  }
  generateLabels() {
    if (this.containerWidth < 192) {
      return [];
    } else if (this.containerWidth <= 300) {
      return [
        { x: -180, y: -45, text: "S" },
        { x: -90, y: -45, text: "W" },
        { x: 0, y: -45, text: "N" },
        { x: 90, y: -45, text: "E" },
        { x: 180, y: -45, text: "S" },
        { x: 270, y: -45, text: "W" },
        { x: 360, y: -45, text: "N" },
        { x: 450, y: -45, text: "E" },
        { x: 540, y: -45, text: "S" }
      ];
    } else {
      return [
        { x: -180, y: -45, text: "S" },
        { x: -135, y: -45, text: "SW" },
        { x: -90, y: -45, text: "W" },
        { x: -45, y: -45, text: "NW" },
        { x: 0, y: -45, text: "N" },
        { x: 45, y: -45, text: "NE" },
        { x: 90, y: -45, text: "E" },
        { x: 135, y: -45, text: "SE" },
        { x: 180, y: -45, text: "S" },
        { x: 225, y: -45, text: "SW" },
        { x: 270, y: -45, text: "W" },
        { x: 315, y: -45, text: "NW" },
        { x: 360, y: -45, text: "N" },
        { x: 405, y: -45, text: "NE" },
        { x: 450, y: -45, text: "E" },
        { x: 495, y: -45, text: "SE" },
        { x: 540, y: -45, text: "S" }
      ];
    }
  }
  generateIntervalTickmarks(scale) {
    const tickmarks = [];
    let cardinalInterval = 90;
    if (this.containerWidth > 300) {
      cardinalInterval = 45;
    } else if (this.containerWidth < 192) {
      cardinalInterval = 0;
    }
    if (!this.tickInterval || this.tickInterval <= 0 || !Number.isFinite(this.tickInterval)) {
      return tickmarks;
    }
    for (let angle = -180; angle < this.maxFOV * 3; angle += this.tickInterval) {
      if (cardinalInterval !== 0 && angle % cardinalInterval === 0) {
        continue;
      }
      tickmarks.push({ angle: angle * scale, type: TickmarkType.secondary });
    }
    return tickmarks;
  }
  generateCardinalTickmarks(scale, labels) {
    const tickmarks = [];
    for (const label of labels) {
      tickmarks.push({ angle: label.x * scale, type: TickmarkType.main });
    }
    return tickmarks;
  }
  generateTickmarks(scale, labels) {
    return [
      ...this.generateCardinalTickmarks(scale, labels),
      ...this.generateIntervalTickmarks(scale)
    ];
  }
  renderFOVIndicator() {
    const indicators = [];
    const maxAdjustment = 10;
    const minContainerWidth = 300;
    const maxContainerWidth = 512;
    let yAdjustment = 0;
    if (this.containerWidth < maxContainerWidth) {
      const widthRange = maxContainerWidth - minContainerWidth;
      const scaleFactor = (maxContainerWidth - this.containerWidth) / widthRange;
      yAdjustment = scaleFactor * maxAdjustment;
    }
    const y = 50 + yAdjustment + (this.rotType ? 12 : 0);
    indicators.push(svg`
          <text x="-175" y=${y} class="label left" fill=${"var(--instrument-tick-mark-secondary-color)"}>
            ${-this.FOV}\u00B0
          </text>`);
    indicators.push(svg`
          <text x="0" y=${y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
            ${this.heading}\u00B0
          </text>`);
    indicators.push(svg`
          <text x="175" y=${y} class="label right" fill=${"var(--instrument-tick-mark-secondary-color)"}>
            ${this.FOV}\u00B0
          </text>`);
    return indicators;
  }
  priorityFor(element) {
    const selected = Array.isArray(this.priorityElements) ? this.priorityElements : [];
    return selected.includes(element) ? this.priority : Priority.regular;
  }
  arrowColorFor(element) {
    return this.priorityFor(element) === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
  }
  get HDGSvg() {
    return svg`<g transform="translate(-24, -74)">
          <path d="M36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="${this.arrowColorFor(
      "hdg"
      /* hdg */
    )}" stroke="var(--border-silhouette-color)"/>
        </g>`;
  }
  COGSvg(translation) {
    return svg`
      <g transform="translate(${-24 + translation}, -74)">
        <path d="M31.9025 36.0262L33.1068 36.6502L32.5956 35.3938L24.4632 15.406L24.0001 14.2677L23.537 15.406L15.4046 35.3938L14.8935 36.6502L16.0978 36.0262L24.0001 31.9319L31.9025 36.0262ZM36.7011 44.1445L36.6898 44.1379L36.6781 44.1318L24.2301 37.6823L24.0001 37.5631L23.7701 37.6823L11.3221 44.1318L11.3104 44.1379L11.2991 44.1445C9.25497 45.3438 6.78661 43.308 7.68828 41.0919L22.6036 4.43285C23.1096 3.18905 24.8906 3.18905 25.3967 4.43284L40.3119 41.0919C41.2136 43.308 38.7452 45.3438 36.7011 44.1445Z" fill="${this.arrowColorFor(
      "cog"
      /* cog */
    )}" stroke="var(--border-silhouette-color)"/>
      </g>
    `;
  }
  render() {
    let angleDiff = this.courseOverGround - this.heading;
    if (angleDiff > this.maxFOV) {
      angleDiff -= 360;
    } else if (angleDiff < -this.maxFOV) {
      angleDiff += 360;
    }
    this.FOV = Math.max(this.minFOV, Math.abs(angleDiff));
    const baseOffset = 5;
    const translationScale = baseOffset * 35 / this.FOV;
    const translation = angleDiff * translationScale;
    const labels = this.generateLabels();
    const tickmarks = this.generateTickmarks(translationScale, labels);
    const scaledLabels = labels.map((l) => ({
      ...l,
      x: l.x * translationScale
    }));
    const hasBottomBar = !!this.rotType;
    const arrowViewBoxY = hasBottomBar ? -128 + Math.round(12 * 384 / 352) : -128;
    const viewBox = `-192 ${arrowViewBoxY} 384 128`;
    return html`
      <div class="container" style="max-width:${this.maxContainerWidth}px">
        <obc-watch-flat
          .FOVIndicator=${this.FOVIndicator ? this.renderFOVIndicator() : []}
          .labels=${scaledLabels}
          .rotation=${this.heading}
          .tickmarks=${tickmarks}
          .tickmarkSpacing=${translationScale}
          .bottomBar=${!!this.rotType}
          .rotType=${this.rotType}
          .rotStartX=${0}
          .rotEndX=${this.rotationsPerMinute / (this.rotMaxValue || 1) * this.rotArcExtent * translationScale}
          .rotDotSpacing=${LINEAR_DOT_ANGLE_SPACING * translationScale}
          .rotationsPerMinute=${this.rotationsPerMinute}
          .rotPriority=${this.priorityFor(
      "rot"
      /* rot */
    )}
        ></obc-watch-flat>
        <svg viewBox=${viewBox} xmlns="http://www.w3.org/2000/svg">
          ${this.HDGSvg}${this.COGSvg(translation)}
        </svg>
      </div>
    `;
  }
};
ObcCompassFlat.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcCompassFlat.prototype, "FOVIndicator", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "heading", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "courseOverGround", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "tickInterval", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "FOV", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "minFOV", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "maxFOV", 2);
__decorateClass([
  property({ type: String })
], ObcCompassFlat.prototype, "priority", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcCompassFlat.prototype, "priorityElements", 2);
__decorateClass([
  property({ type: String })
], ObcCompassFlat.prototype, "rotType", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "rotationsPerMinute", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "rotMaxValue", 2);
__decorateClass([
  property({ type: Number })
], ObcCompassFlat.prototype, "rotArcExtent", 2);
__decorateClass([
  state()
], ObcCompassFlat.prototype, "containerWidth", 2);
__decorateClass([
  state()
], ObcCompassFlat.prototype, "maxContainerWidth", 2);
ObcCompassFlat = __decorateClass([
  customElement("obc-compass-flat")
], ObcCompassFlat);
export {
  CompassFlatPriorityElement,
  LabelPosition,
  LabelStyle,
  ObcCompassFlat,
  RotType
};
//# sourceMappingURL=compass-flat.js.map
