"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var baseCss = require("../common/styles/base.m.css");
var css = require("../theme/default/range-slider.m.css");
var fixedCss = require("./styles/range-slider.m.css");
var index_1 = require("../label/index");
var dimensions_1 = require("@dojo/framework/core/middleware/dimensions");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var theme_1 = require("../middleware/theme");
var vdom_1 = require("@dojo/framework/core/vdom");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var util_1 = require("../common/util");
var factory = vdom_1.create({
    dimensions: dimensions_1.default,
    focus: focus_1.default,
    icache: icache_1.createICacheMiddleware(),
    theme: theme_1.default
})
    .properties()
    .children();
exports.RangeSlider = factory(function RangeSlider(_a) {
    var children = _a.children, id = _a.id, _b = _a.middleware, dimensions = _b.dimensions, focus = _b.focus, icache = _b.icache, theme = _b.theme, properties = _a.properties;
    var _c = properties(), _d = _c.name, name = _d === void 0 ? '' : _d, _e = _c.max, maxRestraint = _e === void 0 ? 100 : _e, _f = _c.min, minRestraint = _f === void 0 ? 0 : _f;
    var _g = tslib_1.__read(children(), 1), _h = _g[0], _j = _h === void 0 ? {} : _h, label = _j.label, output = _j.output;
    var _k = properties(), _l = _k.aria, aria = _l === void 0 ? {} : _l, classes = _k.classes, disabled = _k.disabled, labelHidden = _k.labelHidden, _m = _k.maxName, maxName = _m === void 0 ? name + "_max" : _m, _o = _k.maximumLabel, maximumLabel = _o === void 0 ? 'Maximum' : _o, _p = _k.minName, minName = _p === void 0 ? name + "_min" : _p, _q = _k.minimumLabel, minimumLabel = _q === void 0 ? 'Minimum' : _q, onBlur = _k.onBlur, onFocus = _k.onFocus, onOut = _k.onOut, onOver = _k.onOver, onValue = _k.onValue, outputIsTooltip = _k.outputIsTooltip, readOnly = _k.readOnly, required = _k.required, _r = _k.showOutput, showOutput = _r === void 0 ? false : _r, _s = _k.step, step = _s === void 0 ? 1 : _s, themeProp = _k.theme, valid = _k.valid, variant = _k.variant, _t = _k.initialValue, initialValue = _t === void 0 ? {
        max: maxRestraint,
        min: minRestraint
    } : _t, _u = _k.widgetId, widgetId = _u === void 0 ? "range-slider-" + id : _u;
    var value = properties().value;
    if (value === undefined) {
        value = icache.get('value');
        var existingInitialValue = icache.get('initialValue');
        if (!existingInitialValue ||
            initialValue.min !== existingInitialValue.min ||
            initialValue.max !== existingInitialValue.max) {
            icache.set('value', initialValue);
            icache.set('initialValue', initialValue);
            value = initialValue;
        }
    }
    var themeCss = theme.classes(css);
    var size = dimensions.get('root');
    var isFocused = icache.getOrSet('focused', false);
    var maxLabelId = "max-label-" + id;
    var minLabelId = "min-label-" + id;
    var min = Math.max((value || initialValue).min, minRestraint);
    var max = Math.min((value || initialValue).max, maxRestraint);
    var slider1Percent = (min - minRestraint) / (maxRestraint - minRestraint);
    var slider2Percent = (max - minRestraint) / (maxRestraint - minRestraint);
    var slider1Size = slider1Percent + (slider2Percent - slider1Percent) / 2;
    var slider2Size = 1 - slider1Size;
    var getInputProperties = function (isSlider1) { return (tslib_1.__assign({}, util_1.formatAriaProperties(aria), { 'aria-describedby': isSlider1 ? minLabelId : maxLabelId, 'aria-invalid': (valid === false ? 'true' : undefined), 'aria-labelledby': widgetId + "-label", 'aria-readonly': (readOnly === true
            ? 'true'
            : undefined), classes: [themeCss.input, fixedCss.nativeInput], disabled: disabled, max: "" + maxRestraint, min: "" + minRestraint, name: isSlider1 ? minName : maxName, onblur: function () {
            icache.set('focused', false);
            onBlur && onBlur();
        }, onfocus: function () {
            icache.set('focused', true);
            onFocus && onFocus();
        }, oninput: function (event) {
            onInput(event, isSlider1);
        }, readonly: readOnly, required: required, step: "" + step, type: 'range' })); };
    var onInput = function (event, isMinEvent) {
        event.stopPropagation();
        var value = event.target.value;
        var returnValues = isMinEvent
            ? { min: Math.min(parseFloat(value), max), max: max }
            : { min: min, max: Math.max(min, parseFloat(value)) };
        icache.set('value', returnValues);
        onValue && onValue(returnValues);
    };
    var slider1 = (vdom_1.tsx("input", tslib_1.__assign({}, getInputProperties(true), { key: "slider1", value: "" + min, styles: {
            clip: "rect(auto, " + Math.round(slider1Size * size.client.width) + "px, auto, auto)"
        } })));
    var slider2 = (vdom_1.tsx("input", tslib_1.__assign({}, getInputProperties(false), { key: "slider2", styles: {
            clip: "rect(auto, auto, auto, " + Math.round((1 - slider2Size) * size.client.width) + "px)"
        }, value: "" + max })));
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            isFocused ? themeCss.focused : null,
            valid === false ? themeCss.invalid : null,
            valid === true ? themeCss.valid : null,
            readOnly ? themeCss.readonly : null,
            showOutput ? themeCss.hasOutput : null
        ] },
        label ? (vdom_1.tsx(index_1.default, { classes: classes, variant: variant, disabled: disabled, focused: isFocused, hidden: labelHidden, key: "label", readOnly: readOnly, required: required, secondary: true, theme: themeProp, valid: valid, widgetId: widgetId + "-label" }, label)) : null,
        vdom_1.tsx("div", { classes: [themeCss.inputWrapper, fixedCss.inputWrapperFixed], onpointerenter: function () {
                onOver && onOver();
            }, onpointerleave: function () {
                onOut && onOut();
            } },
            slider1,
            vdom_1.tsx("div", { classes: baseCss.visuallyHidden, id: minLabelId, key: "minimumLabel" }, minimumLabel),
            slider2,
            vdom_1.tsx("div", { classes: baseCss.visuallyHidden, id: maxLabelId, key: "maximumLabel" }, maximumLabel),
            vdom_1.tsx("div", { classes: [themeCss.filled, fixedCss.filledFixed], key: "track", styles: {
                    left: Math.round(slider1Percent * 100) + '%',
                    width: Math.round((slider2Percent - slider1Percent) * 100) + '%'
                } }),
            vdom_1.tsx("div", { key: "leftThumb", classes: [
                    themeCss.thumb,
                    themeCss.leftThumb,
                    focus.isFocused('slider1') ? themeCss.focused : undefined,
                    fixedCss.thumbFixed
                ], styles: {
                    left: Math.round(slider1Percent * 100) + '%'
                } }),
            vdom_1.tsx("div", { key: "rightThumb", classes: [
                    themeCss.thumb,
                    themeCss.rightThumb,
                    focus.isFocused('slider2') ? themeCss.focused : undefined,
                    fixedCss.thumbFixed
                ], styles: {
                    left: Math.round(slider2Percent * 100) + '%'
                } }),
            showOutput ? (vdom_1.tsx("output", { classes: [themeCss.output, outputIsTooltip ? themeCss.outputTooltip : null], for: widgetId, styles: outputIsTooltip
                    ? {
                        left: Math.round((slider1Percent +
                            (slider2Percent - slider1Percent) / 2) *
                            100) + "%"
                    }
                    : undefined, tabIndex: -1 }, output ? output({ min: min, max: max }) : min + ", " + max)) : null)));
});
exports.default = exports.RangeSlider;

/*# sourceMappingURL=index.js.map*/