import { h, Host } from "@stencil/core";
import { SxHandler } from "../../utils/sx-handler";
export class DgaSlider {
    constructor() {
        this.min = 0;
        this.max = 100;
        this.step = 1;
        this.range = true;
        this.showLabel = true;
        this.showHelperText = true;
        // @Prop() rangeValues?: [number,number]=[this.min,this.max];
        this.size = 'small';
    }
    // private minPos: number;
    // private maxPos: number;
    // private railColorStyle: { left: string; width: string };
    calculatePositions() {
        const minPos = ((this.minValue - this.min) / (this.max - this.min)) * 100;
        const maxPos = ((this.maxValue - this.min) / (this.max - this.min)) * 100;
        this.minPos = minPos;
        this.maxPos = maxPos;
        this.railColorStyle = !this.range ? { left: '0%', width: `${minPos}%` } : { left: `${minPos}%`, width: `${maxPos - minPos}%` };
    }
    componentWillLoad() {
        this.minValue = this.initialMin !== undefined ? this.initialMin : this.min;
        this.maxValue = this.initialMax !== undefined ? this.initialMax : this.max;
        this.calculatePositions();
        this.sxHandler = new SxHandler(this.el, 'dga-slider');
    }
    watchMinValue(newValue) {
        this.minValue = newValue;
        this.calculatePositions();
    }
    watchMaxValue(newValue) {
        this.maxValue = newValue;
        this.calculatePositions();
    }
    watchRangeValue() {
        this.calculatePositions();
    }
    watchInitialMin() {
        this.minValue = this.initialMin !== undefined ? this.initialMin : this.min;
        this.calculatePositions();
    }
    watchInitialMax() {
        this.maxValue = this.initialMax !== undefined ? this.initialMax : this.max;
        this.calculatePositions();
    }
    handleMinChange(e) {
        const target = e.target;
        const newMinVal = this.range ? Math.min(+target.value, this.maxValue - this.step) : Math.min(+target.value);
        this.minValue = newMinVal;
        if (this.onChange) {
            this.onChange({ max: this.maxValue, min: this.minValue });
        }
        this.calculatePositions();
    }
    handleMaxChange(e) {
        const target = e.target;
        const newMaxVal = Math.max(+target.value, this.minValue + this.step);
        this.maxValue = newMaxVal;
        if (this.onChange) {
            this.onChange({ max: this.maxValue, min: this.minValue });
        }
        this.calculatePositions();
    }
    componentDidLoad() {
        this.sxHandler.processSx(this.sx);
    }
    sxChanged() {
        this.sxHandler.processSx(this.sx);
    }
    disconnectedCallback() {
        this.sxHandler.cleanup();
    }
    render() {
        return (h(Host, { key: '99156735a887d2977efa872760796839657fbc4c', id: this.sxHandler.getId(), style: this.sxHandler.getStyles() }, h("div", { key: '373c31f2a55e942e72dfea6d072074b0fae427f9', class: `range-slider-wrapper ${this.size}` }, h("div", { key: '2ccf8864cdc333d6f1c3a30e115fa76a258bdf57', class: "range-slider-input-wrapper" }, h("input", { key: '7dbd72a32e3d9e5a9f82dfe8d560f39af4b079be', class: "range-slider-input", type: "range", value: this.minValue, min: this.min, max: this.max, step: this.step, onInput: this.handleMinChange.bind(this) }), this.range && (h("input", { key: '4f9dcd64bc3ca265e8ea39c035a502c5af5a505a', class: "range-slider-input", type: "range", value: this.maxValue, min: this.min, max: this.max, step: this.step, onInput: this.handleMaxChange.bind(this) }))), h("div", { key: '17493e5639f5fc4284f0ee970f1309204e54d986', class: "range-slider-container" }, this.showLabel && h("h3", { key: '3580454a2876ebc214381df06b5fe83cd6ffb4a0' }, this.label), h("div", { key: '40c9dd2d863d3e01071d0c746cb3c30809bc9b90', class: "range-slider-control-wrapper" }, h("div", { key: '45db3bc92aa1b1fcafb8b3da46d99b6dd1a173fd', class: "range-slider-control", style: { left: `${this.minPos}%` } }), h("div", { key: 'e5fa57e2c12f3bc4d8ab289b82d46529b5cdcca9', class: "range-slider-rail" }, this.range && h("div", { key: 'a3d336307aa1652f28773a39b0c0c5937f79b058', class: "range-slider-number_left" }, this.minValue), h("div", { key: 'b10ed050daf6d159a4944ed3f8bebb00a89c502e', class: "range-slider-inner-rail", style: this.railColorStyle }), this.range && h("div", { key: '8527e054dae0fb54f7ddbc2e4e9bd57247a4a371', class: "range-slider-number_right" }, this.maxValue), !this.range && h("div", { key: 'd67b2f4c17073e10f8e3ec994c172bcff53eeba1', class: "range-slider-number_right" }, this.minValue)), this.range && h("div", { key: 'dd09ca4645a161071b5902609dd08b702d85d41d', class: "range-slider-control", style: { left: `${this.maxPos}%` } }), this.showHelperText && this.helperText && (h("div", { key: '360a19f11759119f049b7d0e7994cc2247e8c2ca', class: "range-slider-note" }, h("div", { key: 'fc461cdf4716f377dc09ae7d3a53e289190712eb', class: "range-slider-note-icon" }, h("svg", { key: 'ca6f47d6134765b97b537f6ce7ba4f88b5e26f41', width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '82423c6d4be56d6a934f7329c50e4d26b16f2611', "clip-path": "url(#clip0_17869_405)" }, h("path", { key: 'cbd8467cedb5ddd65a1ea308d21831ff394a77be', d: "M6.06004 6.00001C6.21678 5.55446 6.52614 5.17875 6.93334 4.93943C7.34055 4.70012 7.8193 4.61264 8.28483 4.69248C8.75035 4.77233 9.17259 5.01436 9.47676 5.3757C9.78093 5.73703 9.94741 6.19436 9.94671 6.66668C9.94671 8.00001 7.94671 8.66668 7.94671 8.66668M8.00004 11.3333H8.00671M14.6667 8.00001C14.6667 11.6819 11.6819 14.6667 8.00004 14.6667C4.31814 14.6667 1.33337 11.6819 1.33337 8.00001C1.33337 4.31811 4.31814 1.33334 8.00004 1.33334C11.6819 1.33334 14.6667 4.31811 14.6667 8.00001Z", stroke: "#384250", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("defs", { key: '649f351602aefbb11ca78b68682fa8a12134f955' }, h("clipPath", { key: '3a55b42b09c722bb960f4bdd9d6d7424bdeeaa25', id: "clip0_17869_405" }, h("rect", { key: '8c08f74a33fd6da026a82e87304d71c5bd148af0', width: "16", height: "16", fill: "white" }))))), h("div", { key: '0c30c60cd92c6a81fefb9cd890d3f372c51e1162', class: "range-slider-note-content" }, h("p", { key: 'a4d532e0ffa12aa1624e02c4374c394ddd788f35' }, this.helperText)))))))));
    }
    static get is() { return "dga-slider"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-slider.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-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"
            },
            "range": {
                "type": "boolean",
                "attribute": "range",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "showLabel": {
                "type": "boolean",
                "attribute": "show-label",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "showHelperText": {
                "type": "boolean",
                "attribute": "show-helper-text",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "helperText": {
                "type": "string",
                "attribute": "helper-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium'",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'small'"
            },
            "initialMin": {
                "type": "number",
                "attribute": "initial-min",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "initialMax": {
                "type": "number",
                "attribute": "initial-max",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "onChange": {
                "type": "unknown",
                "attribute": "on-change",
                "mutable": false,
                "complexType": {
                    "original": "(props: { min: number; max: number }) => void",
                    "resolved": "(props: { min: number; max: number; }) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "sx": {
                "type": "string",
                "attribute": "sx",
                "mutable": false,
                "complexType": {
                    "original": "SxProps | string | undefined",
                    "resolved": "SxProps | string",
                    "references": {
                        "SxProps": {
                            "location": "import",
                            "path": "../../utils/sx-handler",
                            "id": "src/utils/sx-handler.ts::SxProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "minValue": {},
            "maxValue": {},
            "minPos": {},
            "maxPos": {},
            "railColorStyle": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "min",
                "methodName": "watchMinValue"
            }, {
                "propName": "max",
                "methodName": "watchMaxValue"
            }, {
                "propName": "range",
                "methodName": "watchRangeValue"
            }, {
                "propName": "initialMin",
                "methodName": "watchInitialMin"
            }, {
                "propName": "initialMax",
                "methodName": "watchInitialMax"
            }, {
                "propName": "sx",
                "methodName": "sxChanged"
            }];
    }
}
