"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var focus_1 = require("@dojo/framework/core/middleware/focus");
var icache_1 = require("@dojo/framework/core/middleware/icache");
var theme_1 = require("../middleware/theme");
var vdom_1 = require("@dojo/framework/core/vdom");
var util_1 = require("../common/util");
var index_1 = require("../label/index");
var css = require("../theme/default/slider.m.css");
var fixedCss = require("./styles/slider.m.css");
var factory = vdom_1.create({
    theme: theme_1.default,
    focus: focus_1.default,
    icache: icache_1.createICacheMiddleware()
})
    .properties()
    .children();
exports.Slider = factory(function Slider(_a) {
    var id = _a.id, _b = _a.middleware, theme = _b.theme, focus = _b.focus, icache = _b.icache, properties = _a.properties, children = _a.children;
    var _c = properties(), _d = _c.aria, aria = _d === void 0 ? {} : _d, disabled = _c.disabled, _e = _c.widgetId, widgetId = _e === void 0 ? "slider-" + id + "}" : _e, valid = _c.valid, labelAfter = _c.labelAfter, labelHidden = _c.labelHidden, _f = _c.max, max = _f === void 0 ? 100 : _f, _g = _c.min, min = _g === void 0 ? 0 : _g, name = _c.name, readOnly = _c.readOnly, required = _c.required, _h = _c.showOutput, showOutput = _h === void 0 ? true : _h, _j = _c.step, step = _j === void 0 ? 1 : _j, _k = _c.vertical, vertical = _k === void 0 ? false : _k, _l = _c.verticalHeight, verticalHeight = _l === void 0 ? '200px' : _l, _m = _c.outputIsTooltip, outputIsTooltip = _m === void 0 ? false : _m, themeProp = _c.theme, variant = _c.variant, classes = _c.classes, onOut = _c.onOut, onOver = _c.onOver, onBlur = _c.onBlur, onFocus = _c.onFocus, onValue = _c.onValue;
    var _o = tslib_1.__read(children(), 1), _p = _o[0], _q = _p === void 0 ? { output: undefined, label: undefined } : _p, output = _q.output, label = _q.label;
    var _r = properties().initialValue, initialValue = _r === void 0 ? min : _r;
    var value = properties().value;
    if (value === undefined) {
        value = icache.get('value') || initialValue;
        var existingInitialValue = icache.getOrSet('initialValue', min);
        if (initialValue !== existingInitialValue) {
            value = initialValue;
            if (initialValue > max) {
                value = max;
            }
            else if (initialValue < min) {
                value = min;
            }
            icache.set('value', value);
            icache.set('initialValue', initialValue);
            onValue && onValue(value);
        }
    }
    else {
        if (value > max) {
            value = max;
        }
        else if (value < min) {
            value = min;
        }
        icache.set('value', value);
    }
    var themeCss = theme.classes(css);
    var percentValue = ((value - min) / (max - min)) * 100;
    var outputStyles = {};
    if (outputIsTooltip) {
        outputStyles = vertical ? { top: 100 - percentValue + "%" } : { left: percentValue + "%" };
    }
    var slider = (vdom_1.tsx("div", { classes: [themeCss.inputWrapper, fixedCss.inputWrapperFixed], styles: vertical ? { height: verticalHeight } : {} },
        vdom_1.tsx("input", tslib_1.__assign({ key: "input" }, util_1.formatAriaProperties(aria), { classes: [themeCss.input, fixedCss.nativeInput], disabled: disabled, id: widgetId, focus: focus.shouldFocus, "aria-invalid": valid === false ? 'true' : undefined, max: "" + max, min: "" + min, name: name, readOnly: readOnly, "aria-readonly": readOnly ? 'true' : undefined, required: required, step: "" + step, styles: vertical ? { width: verticalHeight } : {}, type: "range", value: "" + value, onblur: function () { return onBlur && onBlur(); }, onfocus: function () { return onFocus && onFocus(); }, onpointerenter: function () { return onOver && onOver(); }, onpointerleave: function () { return onOut && onOut(); }, oninput: function (event) {
                event.stopPropagation();
                var value = parseFloat(event.target.value);
                icache.set('value', value);
                onValue && onValue(value);
            } })),
        vdom_1.tsx("div", { classes: [themeCss.track, fixedCss.trackFixed], "aria-hidden": "true", styles: vertical ? { width: verticalHeight } : {} },
            vdom_1.tsx("span", { classes: [themeCss.fill, fixedCss.fillFixed], styles: { width: percentValue + "%" } }),
            vdom_1.tsx("span", { classes: [themeCss.thumb, fixedCss.thumbFixed], styles: { left: percentValue + "%" } })),
        showOutput ? (vdom_1.tsx("output", { classes: [themeCss.output, outputIsTooltip ? themeCss.outputTooltip : null], for: widgetId, styles: outputStyles, tabIndex: -1 }, output ? output(value) : "" + value)) : null));
    var content = [
        label ? (vdom_1.tsx(index_1.default, { theme: themeProp, classes: classes, variant: variant, disabled: disabled, focused: focus.shouldFocus(), valid: valid, readOnly: readOnly, required: required, hidden: labelHidden, secondary: true, forId: widgetId }, label)) : null,
        slider
    ];
    return (vdom_1.tsx("div", { key: "root", classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            focus.isFocused('input') ? themeCss.focused : null,
            valid === false ? themeCss.invalid : null,
            valid === true ? themeCss.valid : null,
            readOnly ? themeCss.readonly : null,
            vertical ? themeCss.vertical : null,
            fixedCss.rootFixed
        ] }, labelAfter ? content.reverse() : content));
});
exports.default = exports.Slider;

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