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 = 180 - 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 ObcRoll = class extends LitElement {
  constructor() {
    super(...arguments);
    this.roll = 0;
    this.minAvgRoll = 0;
    this.maxAvgRoll = 0;
    this.vesselImageFore = VesselImage.psvFore;
    this.maxRollAdvice = void 0;
    this.triggerRollAdvice = 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"
            y2="${watchRadius - 10}"
            x2="0"
            stroke="var(--instrument-enhanced-secondary-color)"
            transform="rotate(${this.roll} 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}
          tickmarksInside
          .areas=${[
      {
        startAngle: 135,
        endAngle: 225,
        roundOutsideCut: true,
        roundInsideCut: true
      }
    ]}
          .barAreas=${[
      {
        startAngle: 180 + this.minAvgRoll,
        endAngle: 180 + this.maxAvgRoll,
        fillColor: "var(--instrument-enhanced-tertiary-color)"
      }
    ]}
          .needles=${[
      {
        angle: 180 + this.roll,
        fillColor: "var(--instrument-enhanced-secondary-color)",
        strokeColor: "var(--border-silhouette-color)"
      }
    ]}
          .vessels=${[
      {
        size: VesselImageSize.large,
        vesselImage: this.vesselImageFore,
        transform: `rotate(${this.roll}deg)`
      }
    ]}
          .tickmarks=${[
      {
        angle: 180,
        type: TickmarkType.main
      }
    ]}
          .advices=${this.advices}
        ></obc-watch>
      </div>
    `;
  }
  get advices() {
    const advices = [];
    if (this.maxRollAdvice !== void 0) {
      const state = this.triggerRollAdvice ? AdviceState.triggered : AdviceState.regular;
      advices.push({
        minAngle: 135,
        maxAngle: 180 - this.maxRollAdvice,
        type: AdviceType.caution,
        state,
        hideMinTickmark: true
      });
      advices.push({
        minAngle: 180 + this.maxRollAdvice,
        maxAngle: 225,
        type: AdviceType.caution,
        state,
        hideMaxTickmark: true
      });
    }
    return advices;
  }
};
ObcRoll.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 })
], ObcRoll.prototype, "roll", 2);
__decorateClass([
  property({ type: Number })
], ObcRoll.prototype, "minAvgRoll", 2);
__decorateClass([
  property({ type: Number })
], ObcRoll.prototype, "maxAvgRoll", 2);
__decorateClass([
  property({ type: String })
], ObcRoll.prototype, "vesselImageFore", 2);
__decorateClass([
  property({ type: Number })
], ObcRoll.prototype, "maxRollAdvice", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRoll.prototype, "triggerRollAdvice", 2);
ObcRoll = __decorateClass([
  customElement("obc-roll")
], ObcRoll);
export {
  ObcRoll
};
//# sourceMappingURL=roll.js.map
