import { unsafeCSS, LitElement, html, svg, nothing } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./velocity-projection-plot.css.js";
import "../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 ObcVelocityProjectionPlot = class extends LitElement {
  constructor() {
    super(...arguments);
    this.dataPoints = [];
    this.instantWindDirectionDeg = null;
    this.instantWindSpeedNumber = null;
    this.instantCurrentDirectionDeg = null;
    this.instantCurrentSpeedNumber = null;
    this.vesselImage = VesselImage.cargoWindTop;
  }
  render() {
    const width = 320;
    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
    return html`
      <div class="container">
        <obc-watch
          crosshairEnabled
          northArrow
          .vessels=${[
      {
        size: VesselImageSize.small,
        vesselImage: this.vesselImage,
        transform: ""
      }
    ]}
          .windFromDirectionDeg=${this.instantWindDirectionDeg}
          .wind=${this.instantWindSpeedNumber}
          .currentFromDirectionDeg=${this.instantCurrentDirectionDeg}
          .current=${this.instantCurrentSpeedNumber}
          .padding=${70}
        >
        </obc-watch>
        <svg viewBox="${viewBox}">${this.renderPlotLines()}</svg>
      </div>
    `;
  }
  isSelected(dp) {
    if (this.instantWindDirectionDeg != null) {
      return dp.startAngleDeg <= this.instantWindDirectionDeg && dp.endAngleDeg >= this.instantWindDirectionDeg;
    }
    return true;
  }
  color(dp) {
    if (this.isSelected(dp)) {
      return {
        totalEnergy: "var(--instrument-frame-tertiary-color)",
        windEnergy: "var(--instrument-enhanced-tertiary-color)",
        speed: "var(--instrument-enhanced-secondary-color)"
      };
    } else {
      return {
        totalEnergy: "var(--instrument-frame-primary-color)",
        windEnergy: "var(--instrument-frame-secondary-color)",
        speed: "var(--instrument-frame-secondary-color)"
      };
    }
  }
  renderPlotLines() {
    const innerRadius = 65 / 2;
    const dataPoints = this.dataPoints;
    const maxLength = Math.max(
      ...dataPoints.map(
        (dp) => dp.ratioWindEnergyOrExcessSpeed * dp.ratioTotalEnergy
      ),
      ...dataPoints.map((dp) => dp.ratioTotalEnergy)
    );
    const elements = dataPoints.map((dp) => {
      const startAngle = dp.startAngleDeg * Math.PI / 180 - Math.PI / 2;
      const endAngle = dp.endAngleDeg * Math.PI / 180 - Math.PI / 2;
      const c = this.color(dp);
      const totalEnergyRadius = (100 - innerRadius) * (dp.ratioTotalEnergy / maxLength) + innerRadius;
      const windEnergyOrExcessSpeedRadius = (totalEnergyRadius - innerRadius) * dp.ratioWindEnergyOrExcessSpeed + innerRadius;
      const innerArchPath = `M ${Math.cos(endAngle) * innerRadius} ${Math.sin(endAngle) * innerRadius} A ${innerRadius} ${innerRadius} 0 0 0 ${Math.cos(startAngle) * innerRadius} ${Math.sin(startAngle) * innerRadius}`;
      const totalEnergyArchPath = `${Math.cos(startAngle) * totalEnergyRadius} ${Math.sin(startAngle) * totalEnergyRadius} A ${totalEnergyRadius} ${totalEnergyRadius} 0 0 1 ${Math.cos(endAngle) * totalEnergyRadius} ${Math.sin(endAngle) * totalEnergyRadius}`;
      const windEnergyOrExcessSpeedArchPath = `${Math.cos(startAngle) * windEnergyOrExcessSpeedRadius} ${Math.sin(startAngle) * windEnergyOrExcessSpeedRadius} A ${windEnergyOrExcessSpeedRadius} ${windEnergyOrExcessSpeedRadius} 1 0 1 ${Math.cos(endAngle) * windEnergyOrExcessSpeedRadius} ${Math.sin(endAngle) * windEnergyOrExcessSpeedRadius}`;
      const windEnergyOrExcessSpeedArchPathReverse = `${Math.cos(endAngle) * windEnergyOrExcessSpeedRadius} ${Math.sin(endAngle) * windEnergyOrExcessSpeedRadius} A ${windEnergyOrExcessSpeedRadius} ${windEnergyOrExcessSpeedRadius} 1 0 0 ${Math.cos(startAngle) * windEnergyOrExcessSpeedRadius} ${Math.sin(startAngle) * windEnergyOrExcessSpeedRadius}`;
      const windEnergyPie = svg`<path d="${innerArchPath} L ${windEnergyOrExcessSpeedArchPath} Z" fill=${c.windEnergy} stroke=${c.windEnergy} stroke-width="1" />`;
      const windEnergyArch = svg`<path d="M${windEnergyOrExcessSpeedArchPath}" fill="none" stroke=${c.windEnergy} stroke-width="1" />`;
      const totalEnergyArch = svg`
      <path d="M${totalEnergyArchPath}" fill="none" stroke="var(--border-silhouette-color)" stroke-width="2" />
      <path d="M${totalEnergyArchPath}" fill="none" stroke="var(--element-inactive-color)" stroke-width="1" />
      `;
      const totalEneryPie = svg`<path d="${innerArchPath} L ${totalEnergyArchPath} Z" fill=${c.totalEnergy}/>`;
      const speedPie = dp.ratioWindEnergyOrExcessSpeed > 1 ? svg`<path d="M${totalEnergyArchPath} L ${windEnergyOrExcessSpeedArchPathReverse} Z" fill=${c.speed}/>` : nothing;
      const maxRadius = Math.max(totalEnergyRadius, windEnergyOrExcessSpeedRadius) + 0.5;
      const minRadius = innerRadius - 0.5;
      const startLine = svg`<line x1="${Math.cos(startAngle) * minRadius}" y1="${Math.sin(startAngle) * minRadius}" x2="${Math.cos(startAngle) * maxRadius}" y2="${Math.sin(startAngle) * maxRadius}" stroke="var(--border-silhouette-color)" stroke-width="1" />`;
      const endLine = svg`<line x1="${Math.cos(endAngle) * minRadius}" y1="${Math.sin(endAngle) * minRadius}" x2="${Math.cos(endAngle) * maxRadius}" y2="${Math.sin(endAngle) * maxRadius}" stroke="var(--border-silhouette-color)" stroke-width="1" />`;
      return svg`<g>
      ${totalEneryPie}
        ${windEnergyPie}
        ${speedPie}
        ${totalEnergyArch}
        ${windEnergyArch}
        ${startLine}
        ${endLine}
      </g>`;
    });
    return svg`<g>
        ${elements}
      </g>`;
  }
};
ObcVelocityProjectionPlot.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcVelocityProjectionPlot.prototype, "dataPoints", 2);
__decorateClass([
  property({ type: Number })
], ObcVelocityProjectionPlot.prototype, "instantWindDirectionDeg", 2);
__decorateClass([
  property({ type: Number })
], ObcVelocityProjectionPlot.prototype, "instantWindSpeedNumber", 2);
__decorateClass([
  property({ type: Number })
], ObcVelocityProjectionPlot.prototype, "instantCurrentDirectionDeg", 2);
__decorateClass([
  property({ type: Number })
], ObcVelocityProjectionPlot.prototype, "instantCurrentSpeedNumber", 2);
__decorateClass([
  property({ type: String })
], ObcVelocityProjectionPlot.prototype, "vesselImage", 2);
ObcVelocityProjectionPlot = __decorateClass([
  customElement("obc-velocity-projection-plot")
], ObcVelocityProjectionPlot);
export {
  ObcVelocityProjectionPlot
};
//# sourceMappingURL=velocity-projection-plot.js.map
