/* ===================== AUTOGENERATED SOURCE IMPORT ===================== */

import Template from "/emcJS/util/html/template/HTMLTemplate.js";

const TPL = new Template(`
    <input type="range" id="slider">
`);

import GlobalStyle from "/emcJS/util/html/template/CSSTemplate.js";

const STYLE = new GlobalStyle(`
    :host {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #slider {
        display: block;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--slider-track-size, 5px);
        margin: max(0px, calc((var(--slider-thumb-size, 15px) - var(--slider-track-size, 5px)) / 2)) 0;
        background: var(--slider-track-color, #f1f1f1);
        border-width: var(--slider-track-border-width, 2px);
        border-style: var(--slider-track-border-style, solid);
        border-color: var(--slider-track-border-color, #f1f1f1);
        border-radius: var(--slider-track-border-radius, 0px);
        border-image-width: 0;
        cursor: pointer;
        outline: none;
    }
    #slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--slider-thumb-size, 15px);
        height: var(--slider-thumb-size, 15px);
        background: var(--slider-thumb-color, #c1c1c1);
        border-width: var(--slider-thumb-border-width, 2px);
        border-style: var(--slider-thumb-border-style, solid);
        border-color: var(--slider-thumb-border-color, #f1f1f1);
        border-radius: var(--slider-thumb-border-radius, 0px);
        cursor: pointer;
    }
    #slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: var(--slider-thumb-color, #c1c1c1);
        border-width: var(--slider-thumb-border-width, 2px);
        border-style: var(--slider-thumb-border-style, solid);
        border-color: var(--slider-thumb-border-color, #f1f1f1);
        border-radius: var(--slider-thumb-border-radius, 0px);
        cursor: pointer;
    }
`);

/* ======================================================================= */

import CustomElement from "../element/CustomElement.js";

/**
 * @deprecated
 */
export default class Slider extends CustomElement {

    constructor() {
        super();
        this.shadowRoot.append(TPL.generate());
        STYLE.apply(this.shadowRoot);
        /* --- */
        const sliderEl = this.shadowRoot.getElementById("slider");
        sliderEl.addEventListener("change", (event) => {
            const value = parseInt(sliderEl.value);
            this.setAttribute("value", value);
            const ev = new Event("change");
            ev.value = value;
            this.dispatchEvent(ev);
            event.stopPropagation();
        });
        sliderEl.addEventListener("input", (event) => {
            const value = parseInt(sliderEl.value);
            this.setAttribute("value", value);
            const ev = new Event("input");
            ev.value = value;
            this.dispatchEvent(ev);
            event.stopPropagation();
        });
    }

    get min() {
        return this.getAttribute("min");
    }

    set min(val) {
        this.setAttribute("min", val);
    }

    get max() {
        return this.getAttribute("max");
    }

    set max(val) {
        this.setAttribute("max", val);
    }

    get value() {
        return this.getAttribute("value");
    }

    set value(val) {
        this.setAttribute("value", val);
    }

    static get observedAttributes() {
        return ["min", "max", "value"];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue != newValue) {
            const sliderEl = this.shadowRoot.getElementById("slider");
            switch (name) {
                case "min": {
                    sliderEl.min = newValue;
                } break;
                case "max": {
                    sliderEl.max = newValue;
                } break;
                case "value": {
                    sliderEl.value = newValue;
                } break;
            }
        }
    }

}

customElements.define("emc-slider", Slider);
