import { css, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import { watchfaceLinear } from "../../building-blocks/instrument-linear/instrument-linear.js";
import { property } from "lit/decorators.js";
import "../watch/watch.js";
import { VesselImage, vesselImages } from "../watch/vessel.js";
import { AdviceState } from "../watch/advice.js";
import { Priority } from "../types.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 ObcHeave = class extends LitElement {
  constructor() {
    super(...arguments);
    this.heave = 0;
    this.gainScale = 10;
    this.minTrendHeave = 0;
    this.maxTrendHeave = 0;
    this.draftOffset = 0;
    this.advice = [];
    this.instrumentRange = 10;
    this.vesselImage = VesselImage.psvFore;
    this.priority = Priority.regular;
    this._boxWidth = 336;
    this._gaugeWidth = 72;
    this._scaleWidth = 24;
  }
  _toTranslatedValue(value) {
    return value * (this._boxWidth / 2) / this.instrumentRange;
  }
  _getAdvice() {
    return this.advice.map((advice) => {
      const isActive = this.maxTrendHeave >= advice.min && this.minTrendHeave <= advice.max;
      const state = isActive ? AdviceState.triggered : advice.hinted ? AdviceState.hinted : AdviceState.regular;
      return {
        ...advice,
        min: advice.min,
        max: advice.max,
        state
      };
    });
  }
  render() {
    const gaugeOffset = this._boxWidth / 2 - this._gaugeWidth / 2;
    const r = 8;
    return html`
      <div class="container">
        <svg viewbox="-200 -200 400 400">
          <path
            d="M ${this._boxWidth / 2 - this._gaugeWidth} ${-this._boxWidth / 2}
             H ${-this._boxWidth / 2 + r} 
             a ${r} ${r} 0 0 0 ${-r} ${r}
             V ${this._boxWidth / 2 - r}
             a ${r} ${r} 0 0 0 ${r} ${r}
             H ${this._boxWidth / 2 - this._gaugeWidth}"
            stroke="var(--instrument-frame-tertiary-color)"
            fill="none"
            vector-effect="non-scaling-stroke"
          />
          <line
            x1=${this._boxWidth / 2 - this._gaugeWidth}
            x2=${-this._boxWidth / 2}
            y1=${0}
            y2=${0}
            stroke="var(--instrument-frame-tertiary-color)"
            stroke-width="1"
            vector-effect="non-scaling-stroke"
          />
          <g transform="translate(${gaugeOffset}, 0)">
            ${watchfaceLinear(
      {
        height: this._boxWidth,
        width: this._gaugeWidth,
        scaleWidth: this._scaleWidth,
        minValue: -this.instrumentRange,
        maxValue: this.instrumentRange
      },
      [
        {
          min: this.minTrendHeave,
          max: this.maxTrendHeave
        }
      ],
      {
        value: this.heave
      },
      { container: "var(--instrument-frame-primary-color)" },
      { hideContainer: false, off: false, priority: this.priority },
      {
        mainTickmarks: [0],
        primaryTickmarkInterval: this.instrumentRange <= 5 ? 1 : 5,
        secondaryTickmarkInterval: this.instrumentRange <= 5 ? 0.5 : 1
      },
      this._getAdvice()
    )}
          </g>
          <defs>
            <clipPath id="heaveClip">
              <rect
                x="-200"
                y=${this._toTranslatedValue(-this.instrumentRange)}
                width="400"
                height=${this._toTranslatedValue(this.instrumentRange) * 2}
              />
            </clipPath>
          </defs>
          <g clip-path="url(#heaveClip)">
            <g
              transform="translate(0, ${this._toTranslatedValue(
      (-this.heave + this.draftOffset) / this.gainScale
    )}) scale(3) 
            translate(${-this._gaugeWidth / 2 - 80 / 1.5} , ${-80})"
            >
              ${this.vesselImage ? vesselImages[this.vesselImage] : nothing}
            </g>
          </g>
        </svg>
      </div>
    `;
  }
};
ObcHeave.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 })
], ObcHeave.prototype, "heave", 2);
__decorateClass([
  property({ type: Number })
], ObcHeave.prototype, "gainScale", 2);
__decorateClass([
  property({ type: Number })
], ObcHeave.prototype, "minTrendHeave", 2);
__decorateClass([
  property({ type: Number })
], ObcHeave.prototype, "maxTrendHeave", 2);
__decorateClass([
  property({ type: Number })
], ObcHeave.prototype, "draftOffset", 2);
__decorateClass([
  property({ type: Array })
], ObcHeave.prototype, "advice", 2);
__decorateClass([
  property({ type: Number })
], ObcHeave.prototype, "instrumentRange", 2);
__decorateClass([
  property({ type: String })
], ObcHeave.prototype, "vesselImage", 2);
__decorateClass([
  property({ type: String })
], ObcHeave.prototype, "priority", 2);
ObcHeave = __decorateClass([
  customElement("obc-heave")
], ObcHeave);
export {
  ObcHeave
};
//# sourceMappingURL=heave.js.map
