/**
 * Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { styles } from './nile-slider.css';
import NileElement from '../internal/nile-element';
import { classMap } from 'lit/directives/class-map.js';
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { rangeSlider, singleSlider, lableContaier } from './nile-slider.template';
import { handleSingleSlider, handleRangeOne, handleRangeTwo, getHtmlElements, removeMoveListeners, valueToPercent, handleTwoThumbClick, addMoveListeners } from './utils/nile-slider.utils';
/**
 * Nile slider component.
 *
 * @tag nile-slider
 */
let NileSlider = class NileSlider extends NileElement {
    constructor() {
        super(...arguments);
        this.minValue = 0;
        this.value = this.minValue;
        this.maxValue = 100;
        this.rangeOneValue = this.minValue;
        this.rangeTwoValue = this.maxValue;
        this.showLabel = false;
        this.labelStart = "";
        this.labelEnd = "";
        this.rangeSlider = false;
        this.labelPosition = "top";
        this.tooltipPosition = "top";
        this.activeThumb = null;
        this.onMouseMove = (e) => {
            const rect = this.range.getBoundingClientRect();
            if (!this.rangeSlider) {
                handleSingleSlider(e, rect, this);
            }
            else {
                if (this.activeThumb === 'one') {
                    handleRangeOne(e, rect, this);
                }
                else if (this.activeThumb === 'two') {
                    handleRangeTwo(e, rect, this);
                }
                const start = valueToPercent(this.rangeOneValue, this);
                const end = valueToPercent(this.rangeTwoValue, this);
                const left = Math.min(start, end);
                const width = Math.abs(end - start);
                if (this.rangeTwoValue >= this.rangeOneValue) {
                    this.completed.style.left = `${left}%`;
                    this.completed.style.width = `${width}%`;
                }
            }
        };
        this.onMouseUp = () => {
            if (!this.rangeSlider)
                this.emit("nile-change-end" /* NileSliderEvents.NILE_CHANGE_END */, { value: this.value });
            else {
                this.emit("nile-button-first-change-end" /* NileSliderEvents.NILE_BUTTON_FIRST_CHANGE_END */, { value: this.rangeOneValue });
                this.emit("nile-button-last-change-end" /* NileSliderEvents.NILE_BUTTON_LAST_CHANGE_END */, { value: this.rangeTwoValue });
            }
            this.activeThumb = null;
            removeMoveListeners(this);
        };
        this.onMouseDown = (e) => {
            const rect = this.range.getBoundingClientRect();
            const clickX = e.clientX - rect.left;
            const percent = (clickX / rect.width) * 100;
            const value = this.minValue + (percent / 100) * (this.maxValue - this.minValue);
            if (!this.rangeSlider) {
                handleSingleSlider(e, rect, this);
                this.activeThumb = 'one';
                addMoveListeners(this);
            }
            else {
                handleTwoThumbClick(value, this);
                const distToOne = Math.abs(value - this.rangeOneValue);
                const distToTwo = Math.abs(value - this.rangeTwoValue);
                this.activeThumb = distToOne <= distToTwo ? 'one' : 'two';
                addMoveListeners(this);
            }
        };
    }
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        super.connectedCallback();
        this.emit("nile-init" /* NileSliderEvents.NILE_INIT */);
        if (this.rangeSlider) {
            this.checkRangeValidity();
        }
    }
    firstUpdated(changedProps) {
        getHtmlElements(this);
        if (!this.rangeSlider && changedProps.has('value')) {
            this.value = this.checkValueValidity(this.value, this.minValue, this.maxValue);
            const percent = valueToPercent(this.value, this);
            this.buttonOne.style.left = `${percent}%`;
            this.completed.style.width = `${percent}%`;
        }
        else if (this.rangeSlider) {
            const percentOne = valueToPercent(this.rangeOneValue, this);
            const percentTwo = valueToPercent(this.rangeTwoValue, this);
            if (this.buttonOne)
                this.buttonOne.style.left = `${percentOne}%`;
            if (this.buttonTwo)
                this.buttonTwo.style.left = `${percentTwo}%`;
            const left = Math.min(percentOne, percentTwo);
            const width = Math.abs(percentTwo - percentOne);
            this.completed.style.left = `${left}%`;
            this.completed.style.width = `${width}%`;
        }
    }
    checkValueValidity(value, min, max) {
        if (max - min <= 1) {
            return Math.max(min, Math.min(value, max));
        }
        return Math.floor(Math.max(min, Math.min(value, max)));
    }
    checkRangeValidity() {
        if (this.rangeTwoValue > this.maxValue) {
            this.rangeTwoValue = this.maxValue;
        }
        else if (this.rangeTwoValue < this.rangeOneValue) {
            this.rangeTwoValue = this.rangeOneValue;
        }
        if (this.rangeOneValue < this.minValue) {
            this.rangeOneValue = this.minValue;
        }
        else if (this.rangeOneValue > this.rangeTwoValue) {
            this.rangeOneValue = this.rangeTwoValue;
        }
    }
    render() {
        const hasLabels = this.showLabel;
        const ariaLabelledby = hasLabels ? 'label-start label-end' : undefined;
        return html `
      <div
        part="base"
        class=${classMap({
            'container': true,
            'align-item-center': !hasLabels
        })}
      >
        <slot class="span" name="prefix"></slot>
  
        <div
          part="range-container"
          class=${classMap({
            'range-container': true,
            'column-reverse': this.labelPosition === 'bottom'
        })}
        >
          ${hasLabels ? lableContaier(this) : html ``}
  
          <div
            class="range"
            part="range"
            role="group"
            aria-labelledby=${ariaLabelledby}
          >
            <span class="range-completed" part="range-completed"></span>
            ${this.rangeSlider ? rangeSlider(this) : singleSlider(this)}
          </div>
        </div>
  
        <slot class="span" name="suffix"></slot>
      </div>
    `;
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.emit("nile-destroy" /* NileSliderEvents.NILE_DESTROY */);
    }
};
__decorate([
    property({ type: Number })
], NileSlider.prototype, "minValue", void 0);
__decorate([
    property({ type: Number })
], NileSlider.prototype, "value", void 0);
__decorate([
    property({ type: Number })
], NileSlider.prototype, "maxValue", void 0);
__decorate([
    property({ type: Number })
], NileSlider.prototype, "rangeOneValue", void 0);
__decorate([
    property({ type: Number })
], NileSlider.prototype, "rangeTwoValue", void 0);
__decorate([
    property({ type: Boolean })
], NileSlider.prototype, "showLabel", void 0);
__decorate([
    property({ type: String })
], NileSlider.prototype, "labelStart", void 0);
__decorate([
    property({ type: String })
], NileSlider.prototype, "labelEnd", void 0);
__decorate([
    property({ type: Boolean })
], NileSlider.prototype, "rangeSlider", void 0);
__decorate([
    property({ type: String })
], NileSlider.prototype, "labelPosition", void 0);
__decorate([
    property({ type: String })
], NileSlider.prototype, "tooltipPosition", void 0);
NileSlider = __decorate([
    customElement('nile-slider')
], NileSlider);
export { NileSlider };
export default NileSlider;
//# sourceMappingURL=nile-slider.js.map