import { css, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { OUTER_RING_RADIUS, WatchCircleType } from "../watch/watch.js";
import { TickmarkType } from "../watch/tickmark.js";
import { AdviceState, AdviceType } from "../watch/advice.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;
};
const cutAngle = 45;
const watchRadius = OUTER_RING_RADIUS;
const x = watchRadius * Math.cos(cutAngle * Math.PI / 180);
const y = watchRadius * Math.sin(cutAngle * Math.PI / 180);
let ObcPitch = class extends LitElement {
  constructor() {
    super(...arguments);
    this.pitch = 0;
    this.minAvgPitch = 0;
    this.maxAvgPitch = 0;
    this.vesselImageSide = VesselImage.psvSide;
    this.maxPitchAdvice = void 0;
    this.triggerPitchAdvice = false;
  }
  render() {
    return html`
      <div class="container">
        <svg viewBox="-200 -200 400 400">
          <line
            x1="-${watchRadius}"
            y1="0"
            x2="${watchRadius}"
            y2="0"
            stroke="var(--instrument-frame-tertiary-color)"
          />
          <line
            x1="0"
            y1="0"
            x2="${watchRadius - 10}"
            y2="0"
            stroke="var(--instrument-enhanced-secondary-color)"
            transform="rotate(${this.pitch} 0 0)"
          />
          <path
            d="M ${x} ${y} A ${watchRadius} ${watchRadius} 0 1 1 ${x} ${-y}"
            fill="none"
            stroke="var(--instrument-frame-tertiary-color)"
          />
        </svg>
        <obc-watch
          .watchCircleType=${WatchCircleType.double}
          .areas=${[
      {
        startAngle: cutAngle,
        endAngle: 180 - cutAngle,
        roundOutsideCut: true,
        roundInsideCut: true
      }
    ]}
          .barAreas=${[
      {
        startAngle: 90 + this.minAvgPitch,
        endAngle: 90 + this.maxAvgPitch,
        fillColor: "var(--instrument-enhanced-tertiary-color)"
      }
    ]}
          .needles=${[
      {
        angle: 90 + this.pitch,
        fillColor: "var(--instrument-enhanced-secondary-color)",
        strokeColor: "var(--border-silhouette-color)"
      }
    ]}
          .vessels=${[
      {
        size: VesselImageSize.large,
        vesselImage: this.vesselImageSide,
        transform: `rotate(${this.pitch}deg)`
      }
    ]}
          .tickmarks=${[
      {
        angle: 90,
        type: TickmarkType.main
      }
    ]}
          .advices=${this.advices}
        ></obc-watch>
      </div>
    `;
  }
  get advices() {
    const advices = [];
    if (this.maxPitchAdvice !== void 0) {
      const state = this.triggerPitchAdvice ? AdviceState.triggered : AdviceState.regular;
      advices.push({
        minAngle: 60,
        maxAngle: 90 - this.maxPitchAdvice,
        type: AdviceType.caution,
        state,
        hideMinTickmark: true
      });
      advices.push({
        minAngle: 90 + this.maxPitchAdvice,
        maxAngle: 120,
        type: AdviceType.caution,
        state,
        hideMaxTickmark: true
      });
    }
    return advices;
  }
};
ObcPitch.styles = css`
    * {
      box-sizing: border-box;
    }

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

    .container > * {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  `;
__decorateClass([
  property({ type: Number })
], ObcPitch.prototype, "pitch", 2);
__decorateClass([
  property({ type: Number })
], ObcPitch.prototype, "minAvgPitch", 2);
__decorateClass([
  property({ type: Number })
], ObcPitch.prototype, "maxAvgPitch", 2);
__decorateClass([
  property({ type: String })
], ObcPitch.prototype, "vesselImageSide", 2);
__decorateClass([
  property({ type: Number })
], ObcPitch.prototype, "maxPitchAdvice", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPitch.prototype, "triggerPitchAdvice", 2);
ObcPitch = __decorateClass([
  customElement("obc-pitch")
], ObcPitch);
export {
  ObcPitch
};
//# sourceMappingURL=pitch.js.map
