import Renderables from '../Renderables';
/**
 * Implementation of the 'slider' markup element.
 * A input HTML element of type range is used to create a
 * slider element. The classes lto-slider-min, lto-slider-max,
 * lto-slider-value and lto-slider-step and their values
 * are taken over from the markup. The slider anchors is an
 * additional possibility to control the slider and can
 * be accessed using the lto-slider-prev and lto-slider-next
 * classes.
 *
 * @see {@link IRenderable}
 */
var Slider = /** @class */ (function () {
    function Slider(spec) {
        this.container = document.createElement("div");
        this.slider = document.createElement("input");
        this.spec = spec;
    }
    /**
     * @inheritDoc
     */
    Slider.prototype.render = function (renderer, isNested) {
        var _this = this;
        var _a;
        var position = this.spec.position || 'left';
        var minLabel = document.createElement("span");
        var maxLabel = document.createElement("span");
        var values = new Map();
        this.slider.type = "range";
        this.slider.name = this.spec.name || "";
        minLabel.classList.add("lto-slider-min");
        maxLabel.classList.add("lto-slider-max");
        var value = document.createElement("div");
        value.classList.add("lto-slider-value");
        var valueContent = document.createElement("span");
        value.appendChild(valueContent);
        var prevButton;
        var nextButton;
        //@ts-ignore
        this.slider.value = isNaN(this.spec.value) ? "" : this.spec.value;
        //@ts-ignore
        this.slider.min = isNaN(this.spec.min) ? "" : this.spec.min;
        //@ts-ignore
        this.slider.max = isNaN(this.spec.max) ? "" : this.spec.max;
        this.slider.step = this.spec.step || "";
        var initialValue = this.slider.value;
        var minValue = this.slider.min;
        var maxValue = this.slider.max;
        var onChange = function () {
            _this.setSliderMinMaxClass();
            _this.slider.setAttribute("value", _this.slider.value);
            valueContent.innerHTML = _this.slider.value;
        };
        var prevClick = function () {
            if (parseFloat(_this.slider.value) !== parseFloat(_this.slider.min) && _this.slider.getAttribute("value") !== undefined) {
                _this.updateValue(String(parseFloat(_this.slider.value) - parseFloat(_this.slider.step)));
            }
        };
        var nextClick = function () {
            if (parseFloat(_this.slider.value) <= parseFloat(_this.slider.max) && _this.slider.getAttribute("value") !== undefined) {
                _this.updateValue(String(parseFloat(_this.slider.value) + parseFloat(_this.slider.step)));
            }
        };
        if (this.spec.values && this.spec.values.length !== 0) {
            this.slider.value = this.spec.value || "0";
            this.slider.min = "0";
            this.slider.max = (this.spec.values.length - 1).toString();
            this.slider.step = "1";
            this.spec.values.forEach(function (value) { return values.set(_this.spec.values.indexOf(value), value); });
            initialValue = values.get(+this.slider.value);
            minValue = values.get(+this.slider.min).toString();
            maxValue = values.get(+this.slider.max).toString();
            onChange = function () {
                valueContent.innerHTML = values.get(+_this.slider.value);
                _this.slider.setAttribute("value", values.get(+_this.slider.value));
                _this.setSliderMinMaxClass();
            };
            prevClick = function () {
                if (parseInt(_this.slider.value) - 1 >= 0) {
                    var index = parseInt(_this.slider.value) - 1;
                    _this.updateValue(index.toString());
                }
            };
            nextClick = function () {
                if (parseInt(_this.slider.value) + 1 <= values.size - 1) {
                    var index = parseInt(_this.slider.value) + 1;
                    _this.updateValue(index.toString());
                }
            };
        }
        minLabel.innerText = minValue;
        maxLabel.innerText = maxValue;
        this.slider.setAttribute("value", initialValue);
        valueContent.innerHTML = initialValue;
        this.slider.oninput = onChange;
        this.slider.onchange = onChange; // ie11 compatibility
        this.setSliderMinMaxClass();
        _a = Slider.createSliderButtons(), prevButton = _a[0], nextButton = _a[1];
        prevButton.addEventListener("click", prevClick);
        nextButton.addEventListener("click", nextClick);
        this.slider.classList.add("lto-slider", "lto-" + position);
        if (isNested) {
            this.slider.classList.add("lto-nested");
        }
        this.container.classList.add("lto-slider-container");
        if (this.spec.id !== undefined) {
            this.container.id = this.spec.id;
        }
        if (this.spec.class) {
            this.spec.class.split(" ").forEach(function (e) { return _this.container.classList.add(e); });
        }
        this.slider.appendChild(document.createTextNode(this.spec.text || ""));
        var controls = document.createElement("div");
        controls.classList.add("lto-slider-controls");
        this.container.appendChild(value);
        this.container.appendChild(minLabel);
        controls.appendChild(prevButton);
        controls.appendChild(this.slider);
        controls.appendChild(nextButton);
        this.container.appendChild(controls);
        this.container.appendChild(maxLabel);
        return this.container;
    };
    Slider.createSliderButtons = function () {
        var prevButton = document.createElement("a");
        prevButton.classList.add("lto-slider-prev");
        var prevSpan = document.createElement("span");
        prevSpan.innerText = "←";
        prevButton.appendChild(prevSpan);
        var nextButton = document.createElement("a");
        nextButton.classList.add("lto-slider-next");
        var nextSpan = document.createElement("span");
        nextSpan.innerText = "→";
        nextButton.appendChild(nextSpan);
        return [prevButton, nextButton];
    };
    Slider.prototype.updateValue = function (value) {
        this.slider.value = value;
        this.slider.dispatchEvent(new Event("input"));
        this.slider.dispatchEvent(new Event("change")); // ie11 compatibility
    };
    Slider.prototype.setSliderMinMaxClass = function () {
        this.container.classList.remove("lto-slider-value-max", "lto-slider-value-min", "lto-slider-value-one");
        if (this.slider.value === this.slider.max) {
            this.container.classList.add("lto-slider-value-max");
        }
        if (this.slider.value === this.slider.min) {
            this.container.classList.add("lto-slider-value-min");
        }
        if (this.slider.value === "1") {
            this.container.classList.add("lto-slider-value-one");
        }
    };
    return Slider;
}());
export { Slider };
Renderables.register("slider", Slider);
//# sourceMappingURL=index.js.map