var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
  if (kind === "a" && !f)
    throw new TypeError("Private accessor was defined without a getter");
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
    throw new TypeError("Cannot read private member from an object whose class did not declare it");
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _KlevuSlider_instances, _KlevuSlider_initNoUISlider;
import { h, Host } from "@stencil/core";
import noUiSlider from "nouislider";
/**
 * @param slider HtmlElement with an initialized slider
 * @param threshold Minimum proximity (in percentages) to merge tooltips
 * @param separator String joining tooltips
 */
function mergeTooltips(slider, threshold, separator) {
  const textIsRtl = getComputedStyle(slider).direction === "rtl";
  const isRtl = slider.noUiSlider.options.direction === "rtl";
  const isVertical = slider.noUiSlider.options.orientation === "vertical";
  const tooltips = slider.noUiSlider.getTooltips();
  const origins = slider.noUiSlider.getOrigins();
  if (!tooltips) {
    return;
  }
  // Move tooltips into the origin element. The default stylesheet handles this.
  tooltips.forEach(function (tooltip, index) {
    if (tooltip) {
      origins[index].appendChild(tooltip);
    }
  });
  slider.noUiSlider.on("update", function (values, handle, unencoded, tap, positions) {
    const pools = [[]];
    const poolPositions = [[]];
    const poolValues = [[]];
    let atPool = 0;
    // Assign the first tooltip to the first pool, if the tooltip is configured
    if (tooltips[0]) {
      pools[0][0] = 0;
      poolPositions[0][0] = positions[0];
      poolValues[0][0] = values[0];
    }
    for (let i = 1; i < positions.length; i++) {
      if (!tooltips[i] || positions[i] - positions[i - 1] > threshold) {
        atPool++;
        pools[atPool] = [];
        poolValues[atPool] = [];
        poolPositions[atPool] = [];
      }
      if (tooltips[i]) {
        pools[atPool].push(i);
        poolValues[atPool].push(values[i]);
        poolPositions[atPool].push(positions[i]);
      }
    }
    pools.forEach(function (pool, poolIndex) {
      const handlesInPool = pool.length;
      for (let j = 0; j < handlesInPool; j++) {
        const handleNumber = pool[j];
        if (j === handlesInPool - 1) {
          let offset = 0;
          poolPositions[poolIndex].forEach(function (value) {
            offset += 1000 - value;
          });
          const direction = isVertical ? "bottom" : "right";
          const last = isRtl ? 0 : handlesInPool - 1;
          const lastOffset = 1000 - poolPositions[poolIndex][last];
          offset = (textIsRtl && !isVertical ? 100 : 0) + offset / handlesInPool - lastOffset;
          // Center this tooltip over the affected handles
          tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
          tooltips[handleNumber].style.display = "block";
          tooltips[handleNumber].style[direction] = offset + "%";
        }
        else {
          // Hide this tooltip
          tooltips[handleNumber].style.display = "none";
        }
      }
    });
  });
}
/**
 * Horizontal slider component. By default used for price range in this package. But can
 * be used for other purposes as well.
 */
export class KlevuSlider {
  constructor() {
    _KlevuSlider_instances.add(this);
    this.min = undefined;
    this.max = undefined;
    this.start = undefined;
    this.end = undefined;
    this.formatTooltip = undefined;
    this.showTooltips = undefined;
  }
  tooltipUpdated(newValue) {
    var _a;
    (_a = this.sliderInstance) === null || _a === void 0 ? void 0 : _a.updateOptions({
      tooltips: this.showTooltips
        ? this.formatTooltip
          ? {
            to: this.formatTooltip,
          }
          : true
        : false,
    }, true);
  }
  render() {
    return (h(Host, null, h("div", { class: {
        outerContainer: true,
        hasTooltips: Boolean(this.showTooltips),
      } }, h("div", { class: "container", ref: __classPrivateFieldGet(this, _KlevuSlider_instances, "m", _KlevuSlider_initNoUISlider).bind(this) }))));
  }
  static get is() { return "klevu-slider"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["klevu-slider.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["klevu-slider.css"]
    };
  }
  static get properties() {
    return {
      "min": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Min value of the range"
        },
        "attribute": "min",
        "reflect": false
      },
      "max": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Max value of the range"
        },
        "attribute": "max",
        "reflect": false
      },
      "start": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Current start value of the range"
        },
        "attribute": "start",
        "reflect": false
      },
      "end": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Current end value of the range"
        },
        "attribute": "end",
        "reflect": false
      },
      "formatTooltip": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "(value: number) => string",
          "resolved": "((value: number) => string) | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Format tooltip value with function"
        }
      },
      "showTooltips": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Show tooltips on top of slider"
        },
        "attribute": "show-tooltips",
        "reflect": false
      }
    };
  }
  static get events() {
    return [{
        "method": "klevuSliderChange",
        "name": "klevuSliderChange",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "When values change"
        },
        "complexType": {
          "original": "[number, number]",
          "resolved": "[number, number]",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "formatTooltip",
        "methodName": "tooltipUpdated"
      }];
  }
}
_KlevuSlider_instances = new WeakSet(), _KlevuSlider_initNoUISlider = function _KlevuSlider_initNoUISlider(el) {
  if (!el) {
    return;
  }
  if (this.sliderInstance) {
    this.sliderInstance.set([this.start || this.min, this.end || this.max]);
    return;
  }
  this.sliderInstance = noUiSlider.create(el, {
    connect: true,
    tooltips: this.showTooltips
      ? this.formatTooltip
        ? {
          to: this.formatTooltip,
        }
        : true
      : false,
    step: 1,
    range: {
      max: this.max,
      min: this.min,
    },
    start: [this.start || this.min, this.end || this.max],
  });
  // @ts-expect-error
  el.noUiSlider.on("end", (ev) => {
    this.klevuSliderChange.emit([parseFloat(ev[0]), parseFloat(ev[1])]);
  });
  if (this.showTooltips) {
    mergeTooltips(el, 20, " - ");
  }
};
//# sourceMappingURL=klevu-slider.js.map
