import { h } from "@stencil/core";
import { trackComponent } from "../../global/utils/tracking";
import { isNestedInIfxComponent } from "../../global/utils/dom-utils";
import { detectFramework } from "../../global/utils/framework-detection";
export class IfxSlider {
    constructor() {
        this.min = 0;
        this.max = 100;
        this.step = 1;
        this.disabled = false;
        this.showPercentage = false;
        this.type = 'single';
        this.internalValue = 0;
        this.percentage = 0;
        this.internalMinValue = 0;
        this.internalMaxValue = 100;
    }
    valueChanged(newValue) {
        this.internalValue = newValue;
        this.updateValuePercent();
    }
    minValueChanged(newValue) {
        this.internalMinValue = newValue;
        this.updateValuePercent();
    }
    maxValueChanged(newValue) {
        this.internalMaxValue = newValue;
        this.updateValuePercent();
    }
    getRangeSliderWrapper() {
        const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');
        return rangeSliderWrapper;
    }
    handleInputChangeOfRangeSlider(event) {
        const target = event.target;
        if (parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {
            if (target.id === 'max-slider') {
                this.maxInputRef.value = this.minInputRef.value;
            }
            else {
                this.minInputRef.value = this.maxInputRef.value;
            }
        }
        if (target.id === 'max-slider') {
            this.internalMaxValue = parseFloat(this.maxInputRef.value);
        }
        else {
            this.internalMinValue = parseFloat(this.minInputRef.value);
        }
        this.ifxChange.emit({ minVal: this.internalMinValue, maxVal: this.internalMaxValue });
        this.updateValuePercent();
        this.updateZIndexIfRangeSlider(target.id);
    }
    handleOnMouseLeaveOfRangeSlider(event) {
        const target = event.target;
        const sliderWrapper = this.getRangeSliderWrapper();
        if (target.id === 'max-slider') {
            sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);
        }
        else {
            sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);
        }
    }
    calculatePercentageValue() {
        const num = (this.internalValue - this.min) * 1.0;
        const den = this.max - this.min;
        this.percentage = +parseFloat(String((num / den) * 100)).toFixed(2);
    }
    handleInputChange(event) {
        const target = event.target;
        this.internalValue = parseFloat(target.value);
        this.ifxChange.emit(this.internalValue);
        this.calculatePercentageValue();
        this.updateValuePercent();
    }
    roundToValidStep(value) {
        const relativeValue = value - this.min;
        const remainder = relativeValue % this.step;
        if (remainder >= this.step / 2) {
            return this.min + relativeValue + (this.step - remainder);
        }
        else {
            return this.min + relativeValue - remainder;
        }
    }
    updateValuePercent() {
        const den = this.max - this.min;
        if (this.type === 'double') {
            if (this.minInputRef) {
                const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;
                const minPercent = (num / den) * 100;
                this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);
            }
            if (this.maxInputRef) {
                const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;
                const maxPercent = (num / den) * 100;
                this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);
            }
        }
        else {
            if (this.inputRef) {
                const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;
                const den = this.max - this.min;
                const percentage = (num / den) * 100;
                this.inputRef.style.setProperty('--value-percent', `${percentage}%`);
            }
        }
    }
    // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping 
    // if min and max thumbs take the same value.
    updateZIndexIfRangeSlider(targetId = '') {
        if (targetId === 'max-slider') {
            this.minInputRef.style.zIndex = '1';
            this.maxInputRef.style.zIndex = '2';
        }
        else {
            this.minInputRef.style.zIndex = '2';
            this.maxInputRef.style.zIndex = '1';
        }
    }
    componentWillLoad() {
        if (this.value === undefined) {
            this.internalValue = (this.max - this.min) / 2;
        }
        else {
            this.internalValue = Math.max(this.min, Math.min(this.max, this.value));
        }
        this.calculatePercentageValue();
        if (this.minValueHandle !== undefined)
            this.internalMinValue = this.minValueHandle;
        else
            this.internalMinValue = this.min;
        if (this.maxValueHandle !== undefined)
            this.internalMaxValue = this.maxValueHandle;
        else
            this.internalMaxValue = this.max;
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-slider', await framework);
        }
        this.updateValuePercent();
    }
    render() {
        return (h("div", { key: '7c2fc0dc17ed791dacc5560aac54f45349b4364a', class: "ifx-slider" }, this.leftText && (h("span", { key: 'be18da410feb261f214532e2701fa2ed1c44ac29', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '591213f83f1b1b812068f380876fe50d501ae5b1', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
            h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": "Slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalValue, "aria-disabled": this.disabled ? "true" : "false" })
            :
                h("div", { class: 'range-slider__wrapper', "aria-label": this.ariaLabel, role: "group" }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Minimum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMinValue, "aria-disabled": this.disabled ? "true" : "false" }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event), "aria-label": "Maximum value slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.internalMaxValue, "aria-disabled": this.disabled ? "true" : "false" })), this.rightIcon && (h("ifx-icon", { key: '1ff17b510af51491c4f5bb56d52f8f717ba681ef', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '50ba85011187c8a8d630a40cb1c179243c8b9aa6', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '5311446f7bd5cd7c1ffc72f8c6f720a421983485', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
    }
    static get is() { return "ifx-slider"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["slider.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["slider.css"]
        };
    }
    static get properties() {
        return {
            "min": {
                "type": "number",
                "attribute": "min",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "0"
            },
            "max": {
                "type": "number",
                "attribute": "max",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "100"
            },
            "step": {
                "type": "number",
                "attribute": "step",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "1"
            },
            "value": {
                "type": "number",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "minValueHandle": {
                "type": "number",
                "attribute": "min-value-handle",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "maxValueHandle": {
                "type": "number",
                "attribute": "max-value-handle",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "showPercentage": {
                "type": "boolean",
                "attribute": "show-percentage",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "leftIcon": {
                "type": "string",
                "attribute": "left-icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "rightIcon": {
                "type": "string",
                "attribute": "right-icon",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "leftText": {
                "type": "string",
                "attribute": "left-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "rightText": {
                "type": "string",
                "attribute": "right-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": false,
                "complexType": {
                    "original": "'single' | 'double'",
                    "resolved": "\"double\" | \"single\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'single'"
            },
            "ariaLabel": {
                "type": "string",
                "attribute": "aria-label",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "internalValue": {},
            "percentage": {},
            "internalMinValue": {},
            "internalMaxValue": {}
        };
    }
    static get events() {
        return [{
                "method": "ifxChange",
                "name": "ifxChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueChanged"
            }, {
                "propName": "minValueHandle",
                "methodName": "minValueChanged"
            }, {
                "propName": "maxValueHandle",
                "methodName": "maxValueChanged"
            }];
    }
}
//# sourceMappingURL=slider.js.map
