import { LitElement, html } from "lit";
import { property, state } from "lit/decorators.js";
import { customElement } from "../../decorator.js";
import { ResizeController } from "@lit-labs/observers/resize-controller.js";
import { CHART_DIMENSIONS } from "../../charthelpers/constants.js";
import { FrameStyle, BorderRadiusPosition, Priority, InstrumentState } from "../types.js";
import { ExternalScaleSide, computeFixedAspectRatioScale, ExternalScaleOrientation, ScaleType, FillMode, AdvicePosition, computeExternalScaleLayout, toExternalScaleLayoutConfig, renderExternalScale, computeExternalScaleViewBox, computeExternalScaleEffectiveBarThickness, computeScaleDimensionsForReport } from "../../building-blocks/external-scale/external-scale.js";
import { SetpointMixin } from "../../svghelpers/setpoint-mixin.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 ObcGaugeHorizontal = class extends SetpointMixin(LitElement, {
  defaultDeadband: 1
}) {
  constructor() {
    super(...arguments);
    this.minValue = 0;
    this.maxValue = 100;
    this.width = 384;
    this.paddingLeft = CHART_DIMENSIONS.CANVAS_PADDING;
    this.paddingRight = CHART_DIMENSIONS.CANVAS_PADDING;
    this.side = ExternalScaleSide.bottom;
    this.fixedAspectRatio = false;
    this.scaleReferenceSize = 384;
    this._scale = 1;
    this._resizeController = new ResizeController(this, {
      callback: (entries) => {
        if (!this.fixedAspectRatio) return;
        const entry = entries[0];
        if (!entry) return;
        const containerMainAxisSize = entry.contentRect.width;
        const scale = computeFixedAspectRatioScale({
          orientation: ExternalScaleOrientation.horizontal,
          containerMainAxisSize,
          scaleReferenceSize: this.scaleReferenceSize
        });
        this._scale = scale > 0 ? scale : 1;
        this.reportDimensions();
      }
    });
    this.showLabels = true;
    this.barThickness = 48;
    this.tickThickness = 24;
    this.labelThickness = 60;
    this.mainTickmarks = [];
    this.primaryTickmarkInterval = void 0;
    this.secondaryTickmarkInterval = void 0;
    this.tertiaryTickmarkInterval = void 0;
    this.scaleType = ScaleType.regular;
    this.frameStyle = FrameStyle.regular;
    this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;
    this.borderRadius = 8;
    this.priority = Priority.regular;
    this.fillMode = FillMode.fill;
    this.fillMin = void 0;
    this.fillMax = void 0;
    this.value = void 0;
    this.state = InstrumentState.active;
    this.focused = false;
    this.advicePosition = AdvicePosition.inner;
    this.advices = [];
    this.highlightCurrentValue = false;
  }
  get hasBar() {
    return true;
  }
  get scaleBackground() {
    return true;
  }
  get hasScale() {
    return true;
  }
  render() {
    const config = {
      orientation: ExternalScaleOrientation.horizontal,
      side: this.side,
      length: this.width,
      paddingStart: this.paddingLeft,
      paddingEnd: this.paddingRight,
      minValue: this.minValue,
      maxValue: this.maxValue,
      hasScale: this.hasScale,
      labels: this.showLabels,
      hasBar: this.hasBar,
      scaleBackground: this.scaleBackground,
      barThickness: this.barThickness,
      tickThickness: this.tickThickness,
      labelThickness: this.labelThickness,
      mainTickmarks: this.mainTickmarks,
      primaryTickmarkInterval: this.primaryTickmarkInterval,
      secondaryTickmarkInterval: this.secondaryTickmarkInterval,
      tertiaryTickmarkInterval: this.tertiaryTickmarkInterval,
      scaleType: this.scaleType,
      frameStyle: this.frameStyle,
      borderRadiusPosition: this.borderRadiusPosition,
      borderRadius: this.borderRadius,
      priority: this.priority,
      fillMode: this.fillMode,
      fillMin: this.fillMin,
      fillMax: this.fillMax,
      value: this.value,
      setpoint: this.setpoint,
      newSetpoint: this.newSetpoint,
      atSetpoint: this.atSetpoint,
      autoAtSetpoint: this.autoAtSetpoint,
      autoAtSetpointDeadband: this.autoAtSetpointDeadband,
      setpointAtZeroDeadband: this.setpointAtZeroDeadband,
      animateSetpoint: this.animateSetpoint,
      departingNewSetpoint: this.departingNewSetpoint,
      state: this.state,
      touching: this.touching,
      setpointOverride: this.setpointOverride,
      advicePosition: this.advicePosition,
      advices: this.advices,
      fixedAspectRatio: this.fixedAspectRatio,
      // Gauges are always in instrument mode - they use fixed borderRadius (8px)
      // and don't respond to .obc-component-size-* CSS classes for border radius
      instrumentMode: true,
      highlightCurrentValue: this.highlightCurrentValue
    };
    const layout = computeExternalScaleLayout(
      toExternalScaleLayoutConfig(config)
    );
    const parts = renderExternalScale(config);
    const viewBox = computeExternalScaleViewBox(
      { orientation: config.orientation, length: this.width },
      layout
    );
    const preserveAspectRatio = this.fixedAspectRatio ? "xMidYMid meet" : "none";
    return html`
      <svg
        width=${this.fixedAspectRatio ? "100%" : `${this.width}px`}
        height=${this.fixedAspectRatio ? "100%" : `${viewBox.height}px`}
        viewBox="${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}"
        preserveAspectRatio="${preserveAspectRatio}"
        style="--scale: ${this.fixedAspectRatio ? this._scale : 1};"
        part="svg"
      >
        ${parts.barContainer} ${parts.barFill} ${parts.scaleBackground}
        ${parts.tickmarks} ${parts.labels} ${parts.adviceOverlays}
        ${parts.currentValueDot} ${parts.setpoint}
      </svg>
    `;
  }
  willUpdate(changed) {
    super.willUpdate(changed);
    if (changed.has("focused") && !changed.has("touching")) {
      this.touching = this.focused;
    }
  }
  updated(changed) {
    super.updated(changed);
    if (!this.fixedAspectRatio && (changed.has("side") || changed.has("showLabels"))) {
      this.reportDimensions();
    }
  }
  /**
   * Report scale dimensions to parent chart component.
   * Always reports unscaled/reference dimensions so the parent chart can apply
   * consistent proportional scaling in fixedAspectRatioScaling mode.
   */
  reportDimensions() {
    const effectiveBarThickness = computeExternalScaleEffectiveBarThickness({
      hasBar: this.hasBar,
      barThickness: this.barThickness,
      borderRadius: this.borderRadius,
      scaleType: this.scaleType
    });
    const baseDimensions = computeScaleDimensionsForReport({
      orientation: ExternalScaleOrientation.horizontal,
      side: this.side,
      hasBar: this.hasBar,
      hasScale: this.hasScale,
      labels: this.showLabels,
      barThickness: effectiveBarThickness,
      tickThickness: this.tickThickness,
      labelThickness: this.labelThickness,
      length: this.width,
      scaleType: this.scaleType
    });
    const dimensions = baseDimensions;
    this.dispatchEvent(
      new CustomEvent("scale-dimensions-changed", {
        detail: dimensions,
        bubbles: true,
        composed: true
      })
    );
  }
  createRenderRoot() {
    return this;
  }
};
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "minValue", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "maxValue", 2);
__decorateClass([
  property({ type: String })
], ObcGaugeHorizontal.prototype, "side", 2);
__decorateClass([
  state()
], ObcGaugeHorizontal.prototype, "_scale", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcGaugeHorizontal.prototype, "showLabels", 2);
__decorateClass([
  property({ attribute: false })
], ObcGaugeHorizontal.prototype, "mainTickmarks", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "primaryTickmarkInterval", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "secondaryTickmarkInterval", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "tertiaryTickmarkInterval", 2);
__decorateClass([
  property({ type: String, attribute: false })
], ObcGaugeHorizontal.prototype, "borderRadiusPosition", 2);
__decorateClass([
  property({ type: String })
], ObcGaugeHorizontal.prototype, "priority", 2);
__decorateClass([
  property({ type: String })
], ObcGaugeHorizontal.prototype, "fillMode", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "fillMin", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "fillMax", 2);
__decorateClass([
  property({ type: Number })
], ObcGaugeHorizontal.prototype, "value", 2);
__decorateClass([
  property({ type: String })
], ObcGaugeHorizontal.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcGaugeHorizontal.prototype, "focused", 2);
__decorateClass([
  property({ attribute: false })
], ObcGaugeHorizontal.prototype, "advices", 2);
__decorateClass([
  property({ type: Boolean })
], ObcGaugeHorizontal.prototype, "highlightCurrentValue", 2);
ObcGaugeHorizontal = __decorateClass([
  customElement("obc-gauge-horizontal")
], ObcGaugeHorizontal);
export {
  AdvicePosition,
  BorderRadiusPosition,
  ExternalScaleSide,
  FillMode,
  FrameStyle,
  InstrumentState,
  ObcGaugeHorizontal,
  ScaleType
};
//# sourceMappingURL=gauge-horizontal.js.map
