import { unsafeCSS, LitElement, svg, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./watch-flat.css.js";
import { tickmark, TickmarkStyle } from "./tickmark-flat.js";
import { rect } from "../../svghelpers/rectangular.js";
import { customElement } from "../../decorator.js";
import { Priority } from "../types.js";
import { LinearRotPosition, RotType, renderLinearRotBarStatic, renderLinearRotBarDots, renderLinearRotDots, LINEAR_DOT_ANGLE_SPACING } from "../rate-of-turn/rot-renderer.js";
import { disposeRotController, RateOfTurnController } from "../rate-of-turn/rate-of-turn.controller.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 ObcWatchFlat = class extends LitElement {
  constructor() {
    super(...arguments);
    this.width = 352;
    this.height = 72;
    this.padding = 0;
    this.rotation = 0;
    this.tickmarkSpacing = 0;
    this.tickmarks = [];
    this.labels = [];
    this.FOVIndicator = [];
    this.trackHeight = 2 / 3 * this.height;
    this.ticksHeight = this.height - this.trackHeight;
    this.borderRadius = 8;
    this.bottomBar = false;
    this.rotPosition = LinearRotPosition.track;
    this.rotStartX = 0;
    this.rotEndX = 0;
    this.rotDotSpacing = 0;
    this.rotPriority = Priority.regular;
    this._rotationsPerMinute = 0;
  }
  set rotationsPerMinute(value) {
    this._rotationsPerMinute = value;
    if (this._rotController) {
      this._rotController.rotationsPerMinute = value;
    }
  }
  get rotationsPerMinute() {
    return this._rotationsPerMinute;
  }
  get totalHeight() {
    return this.bottomBar ? this.height + this.ticksHeight : this.height;
  }
  renderClipPath(offsetY = 0) {
    return svg`
      <clipPath id="frameClipPath${offsetY === 0 ? "" : "Tickmarks"}">
        <rect x="${-this.width / 2}" y="${-this.totalHeight / 2 + offsetY}" 
              width="${this.width}" height="${this.totalHeight}" 
              rx="${this.borderRadius}" />
      </clipPath>
    `;
  }
  renderLabelMask() {
    return svg`
      <mask id="labelMask">
        <rect x="${-this.width / 2}" y="${-70}" 
              width="${this.width}" height="${32}"
               />
        <linearGradient id="fadeGradient" gradientUnits="userSpaceOnUse"
                        x1="${-this.width / 2}" y1="0" x2="${this.width / 2}" y2="0">
          <stop offset="0%" style="stop-color:black; stop-opacity:1;" />
          <stop offset="10%" style="stop-color:white; stop-opacity:1;" />
          <stop offset="50%" style="stop-color:white; stop-opacity:1;" />
          <stop offset="90%" style="stop-color:white; stop-opacity:1;" />
          <stop offset="100%" style="stop-color:black; stop-opacity:1;" />
        </linearGradient>
        <rect x="${-this.width / 2}" y="${-70}" 
              width="${this.width}" height="${32}"
              fill="url(#fadeGradient)" />
      </mask>
    `;
  }
  renderLabels(scale) {
    const labels = [];
    for (const l of this.labels) {
      labels.push(
        svg`<g transform="translate(${-this.rotation * this.tickmarkSpacing}, ${-6 / scale})">
          <text x=${l.x} y=${l.y} class="label" fill=${"var(--instrument-tick-mark-secondary-color)"}>
            ${l.text}
          </text>
          </g>`
      );
    }
    return labels;
  }
  watchFace() {
    const strokeWidth = 1;
    const th = this.totalHeight;
    const topTicksY = -th / 2;
    return svg`
      ${this.renderClipPath()}
      ${this.renderClipPath(-40)}
      <g clip-path="url(#frameClipPath)">
        ${rect("frame-track", {
      width: this.width,
      height: this.trackHeight,
      y: th / 2 - this.trackHeight - (this.bottomBar ? this.ticksHeight : 0),
      strokeWidth,
      strokeColor: "var(--instrument-frame-secondary-color)",
      strokePosition: "inside",
      fillColor: "var(--instrument-frame-secondary-color)",
      borderRadius: 0
    })}
        ${rect("frame-ticks", {
      width: this.width,
      height: this.ticksHeight,
      y: topTicksY,
      strokeWidth,
      strokeColor: "var(--instrument-frame-primary-color)",
      strokePosition: "inside",
      fillColor: "var(--instrument-frame-primary-color)",
      borderRadius: 0
    })}
        ${this.bottomBar ? rect("frame-bottom-bar", {
      width: this.width,
      height: this.ticksHeight,
      y: th / 2 - this.ticksHeight,
      strokeWidth,
      strokeColor: "var(--instrument-frame-primary-color)",
      strokePosition: "inside",
      fillColor: "var(--instrument-frame-primary-color)",
      borderRadius: 0
    }) : nothing}
      </g>
      ${rect("frame-outline", {
      width: this.width,
      height: th,
      strokeWidth,
      strokeColor: "var(--instrument-frame-tertiary-color)",
      strokePosition: "inside",
      fillColor: "none",
      borderRadius: this.borderRadius
    })}
    `;
  }
  // ---------------------------------------------------------------------------
  // ROT (Rate of Turn) — linear
  // ---------------------------------------------------------------------------
  getRotTrackY() {
    const th = this.totalHeight;
    if (this.rotPosition === LinearRotPosition.scale) {
      return -th / 2 + this.ticksHeight / 2;
    }
    if (this.bottomBar) {
      return th / 2 - this.ticksHeight / 2;
    }
    return this.height / 2 - this.trackHeight / 2;
  }
  getRotColors() {
    const isEnhanced = this.rotPriority === Priority.enhanced;
    return {
      dotColor: isEnhanced ? "var(--instrument-enhanced-tertiary-color)" : "var(--instrument-regular-tertiary-color)",
      barBgColor: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)",
      endDotFill: "var(--border-silhouette-color)",
      endDotStroke: isEnhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)"
    };
  }
  renderRot() {
    if (!this.rotType) return nothing;
    const trackY = this.getRotTrackY();
    const { dotColor, barBgColor, endDotFill, endDotStroke } = this.getRotColors();
    const canAnimateDots = this.rotDotSpacing > 0;
    if (this.rotType === RotType.bar) {
      const hasBar = Math.abs(this.rotEndX - this.rotStartX) >= 1;
      return svg`
        ${renderLinearRotBarStatic({
        startX: this.rotStartX,
        endX: this.rotEndX,
        color: dotColor,
        barColor: barBgColor,
        trackY,
        endDotFill,
        endDotStroke,
        maskId: "rot-bar-mask-linear"
      })}
        ${hasBar && canAnimateDots ? svg`<g clip-path="url(#rot-bar-mask-linear)">
              <g id="rot-spinner">
                ${renderLinearRotBarDots(dotColor, trackY, this.rotDotSpacing, this.width)}
              </g>
            </g>` : nothing}
      `;
    }
    const dotsColor = this.rotPriority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
    return canAnimateDots ? svg`
          <g id="rot-spinner">
            ${renderLinearRotDots(dotsColor, trackY, this.rotDotSpacing, this.width)}
          </g>
        ` : nothing;
  }
  updated(changed) {
    super.updated(changed);
    const el = this.rotType ? this.renderRoot.querySelector("#rot-spinner") : null;
    if (!el) {
      this._rotController = disposeRotController(this, this._rotController);
      return;
    }
    const cyclePx = 360 * (this.rotDotSpacing / LINEAR_DOT_ANGLE_SPACING);
    if (!this._rotController || this._rotController.el !== el) {
      this._rotController = disposeRotController(this, this._rotController);
      this._rotController = new RateOfTurnController(
        this,
        el,
        this._rotationsPerMinute,
        cyclePx
      );
    } else {
      this._rotController.cyclePx = cyclePx;
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this._rotController = disposeRotController(this, this._rotController);
  }
  render() {
    const width = (this.width / 2 + this.padding) * 2;
    const th = this.totalHeight;
    const viewBox = `-${width / 2} -${th / 2} ${width} ${th}`;
    const scale = this.clientWidth / width;
    const contentOffsetY = this.bottomBar ? -this.ticksHeight / 2 : 0;
    return html`
      <svg
        width="100%"
        height="100%"
        viewBox=${viewBox}
        style="--scale: ${scale}"
      >
        ${this.watchFace()} ${this.renderLabelMask()}

        <g transform="translate(0, ${contentOffsetY})">
          <g clip-path="url(#frameClipPath)">
            ${this.tickmarks.map(
      (t) => svg`
              <g transform="translate(${-this.rotation * this.tickmarkSpacing}, 0)">
                ${tickmark(t.angle, t.type, TickmarkStyle.regular)}
              </g>
            `
    )}
          </g>

          <g mask="url(#labelMask)">${this.renderLabels(scale)}</g>
        </g>

        ${this.FOVIndicator}

        <g clip-path="url(#frameClipPath)">${this.renderRot()}</g>
      </svg>
    `;
  }
};
ObcWatchFlat.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "width", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "height", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "padding", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "rotation", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "tickmarkSpacing", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "angleSetpoint", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcWatchFlat.prototype, "tickmarks", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcWatchFlat.prototype, "labels", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcWatchFlat.prototype, "FOVIndicator", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "trackHeight", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "ticksHeight", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "borderRadius", 2);
__decorateClass([
  property({ type: Boolean })
], ObcWatchFlat.prototype, "bottomBar", 2);
__decorateClass([
  property({ type: String })
], ObcWatchFlat.prototype, "rotType", 2);
__decorateClass([
  property({ type: String })
], ObcWatchFlat.prototype, "rotPosition", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "rotStartX", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "rotEndX", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "rotDotSpacing", 2);
__decorateClass([
  property({ type: String })
], ObcWatchFlat.prototype, "rotPriority", 2);
__decorateClass([
  property({ type: Number })
], ObcWatchFlat.prototype, "rotationsPerMinute", 1);
ObcWatchFlat = __decorateClass([
  customElement("obc-watch-flat")
], ObcWatchFlat);
export {
  LinearRotPosition,
  ObcWatchFlat,
  RotType
};
//# sourceMappingURL=watch-flat.js.map
