import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./wind.css.js";
import { WatchCircleType } from "../watch/watch.js";
import { customElement } from "../../decorator.js";
import { VesselImage, VesselImageSize } from "../watch/vessel.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;
};
let ObcWind = class extends LitElement {
  constructor() {
    super(...arguments);
    this.currentWindFromDirection = 0;
    this.currentWindSpeedBeaufort = 1;
    this.windHistogramData = [];
    this.vesselImage = VesselImage.genericTop;
    this.vesselHeadingDeg = 0;
  }
  render() {
    return html`
      <div class="wrapper">
        <obc-watch
          .watchCircleType=${WatchCircleType.double}
          .windFromDirectionDeg=${this.currentWindFromDirection}
          .wind=${this.currentWindSpeedBeaufort}
          .windSymbolRadius=${118 / 0.8}
          crosshairEnabled
          northArrow
          tickmarksInside
          .scaleWindIcon=${0.8}
          .vessels=${[
      {
        size: VesselImageSize.small,
        transform: `rotate(${this.vesselHeadingDeg}deg)`,
        vesselImage: this.vesselImage
      }
    ]}
        ></obc-watch>
        ${this.renderWindHistogram()}
      </div>
    `;
  }
  renderWindHistogram() {
    const maxRadius = 109;
    const minRadius = 50;
    const center = { x: 0, y: 0 };
    const maxOccurrences = Math.max(
      ...this.windHistogramData.map((d) => d.occurrences)
    );
    const interpolated = new Array(360).fill(0);
    if (this.windHistogramData.length > 1) {
      const sorted = [...this.windHistogramData].sort(
        (a, b) => a.direction - b.direction
      );
      for (let i = 0; i < sorted.length; i++) {
        const curr = sorted[i];
        const next = sorted[(i + 1) % sorted.length];
        const start = curr.direction;
        const end = next.direction > start ? next.direction : next.direction + 360;
        for (let deg = start; deg < end; deg++) {
          const t = (deg - start) / (end - start);
          const occ = curr.occurrences + t * (next.occurrences - curr.occurrences);
          interpolated[deg % 360] = occ;
        }
      }
    } else if (this.windHistogramData.length === 1) {
      interpolated.fill(this.windHistogramData[0].occurrences);
    }
    let outerPathPoints = "";
    for (let deg = 0; deg < 360; deg++) {
      const angle = (deg - 90) * Math.PI / 180;
      const occ = interpolated[deg];
      const radius = maxRadius - occ / maxOccurrences * (maxRadius - minRadius);
      const x2 = center.x + radius * Math.cos(angle);
      const y2 = center.y + radius * Math.sin(angle);
      outerPathPoints += `L ${x2} ${y2} `;
    }
    return html`
      <svg width="100%" height="100%" viewBox="-200 -200 400 400">
        <mask id="mask">
          <circle cx="0" cy="0" r="109" stroke-width="1" fill="white" />
          <path d="M 0 ${-maxRadius} ${outerPathPoints}Z" fill="black" />
          <circle
            cx="0"
            cy="0"
            r="109"
            vector-effect="non-scaling-stroke"
            stroke="white"
            stroke-width="1"
            fill="transparent"
          />
        </mask>
        <circle
          cx="0"
          cy="0"
          r="109"
          vector-effect="non-scaling-stroke"
          stroke="var(--instrument-regular-tertiary-color)"
          stroke-width="1"
          fill="var(--instrument-regular-tertiary-color)"
          mask="url(#mask)"
        />
      </svg>
    `;
  }
};
ObcWind.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcWind.prototype, "currentWindFromDirection", 2);
__decorateClass([
  property({ type: Number })
], ObcWind.prototype, "currentWindSpeedBeaufort", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcWind.prototype, "windHistogramData", 2);
__decorateClass([
  property({ type: String })
], ObcWind.prototype, "vesselImage", 2);
__decorateClass([
  property({ type: Number })
], ObcWind.prototype, "vesselHeadingDeg", 2);
ObcWind = __decorateClass([
  customElement("obc-wind")
], ObcWind);
export {
  ObcWind
};
//# sourceMappingURL=wind.js.map
