define(["require", "exports", "tslib", "react", "../../Utilities", "../../Label", "./Slider.scss"], function (require, exports, tslib_1, React, Utilities_1, Label_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var ValuePosition;
    (function (ValuePosition) {
        ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
        ValuePosition[ValuePosition["Next"] = 1] = "Next";
    })(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
    var Slider = /** @class */ (function (_super) {
        tslib_1.__extends(Slider, _super);
        function Slider(props) {
            var _this = _super.call(this, props) || this;
            _this._warnMutuallyExclusive({
                'value': 'defaultValue'
            });
            _this._id = Utilities_1.getId('Slider');
            var value = props.value || props.defaultValue || props.min;
            _this.state = {
                value: value,
                renderedValue: value
            };
            return _this;
        }
        /**
         * Invoked when a component is receiving new props. This method is not called for the initial render.
         */
        Slider.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.value !== undefined) {
                var value = Math.max(newProps.min, Math.min(newProps.max, newProps.value));
                this.setState({
                    value: value,
                    renderedValue: value
                });
            }
        };
        Slider.prototype.render = function () {
            var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, disabled = _a.disabled, label = _a.label, max = _a.max, min = _a.min, showValue = _a.showValue, buttonProps = _a.buttonProps, vertical = _a.vertical;
            var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
            var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
            var lengthString = vertical ? 'height' : 'width';
            var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
            var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
            var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
            return (React.createElement("div", { className: Utilities_1.css('ms-Slider', styles.root, className, (_c = {},
                    _c['ms-Slider-enabled ' + styles.rootIsEnabled] = !disabled,
                    _c['ms-Slider-disabled ' + styles.rootIsDisabled] = disabled,
                    _c['ms-Slider-row ' + styles.rootIsHorizontal] = !vertical,
                    _c['ms-Slider-column ' + styles.rootIsVertical] = vertical,
                    _c)), ref: 'root' },
                label && (React.createElement(Label_1.Label, tslib_1.__assign({ className: styles.titleLabel }, ariaLabel ? {} : { 'htmlFor': this._id }), label)),
                React.createElement("div", { className: Utilities_1.css('ms-Slider-container', styles.container) },
                    React.createElement("button", tslib_1.__assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-label": ariaLabel || label }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css('ms-Slider-slideBox', styles.slideBox, buttonProps.className, !!showValue && 'ms-Slider-showValue', (renderedValue === value) && ('ms-Slider-showTransitions ' + styles.showTransitions)), id: this._id, disabled: disabled, type: 'button', role: 'slider' }),
                        React.createElement("div", { ref: 'sliderLine', className: Utilities_1.css('ms-Slider-line', styles.line) },
                            React.createElement("span", { ref: 'thumb', className: Utilities_1.css('ms-Slider-thumb', styles.thumb), style: this._getThumbStyle(vertical, thumbOffsetPercent) }),
                            React.createElement("span", { className: Utilities_1.css('ms-Slider-active', styles.lineContainer, styles.activeSection), style: (_d = {}, _d[lengthString] = thumbOffsetPercent + '%', _d) }),
                            React.createElement("span", { className: Utilities_1.css('ms-Slider-inactive', styles.lineContainer, styles.inactiveSection), style: (_e = {}, _e[lengthString] = (100 - thumbOffsetPercent) + '%', _e) }))),
                    showValue && React.createElement(Label_1.Label, { className: Utilities_1.css('ms-Slider-value', styles.valueLabel) }, value))));
            var _c, _d, _e;
        };
        Slider.prototype.focus = function () {
            if (this.refs.thumb) {
                this.refs.thumb.focus();
            }
        };
        Object.defineProperty(Slider.prototype, "value", {
            get: function () {
                return this.state.value;
            },
            enumerable: true,
            configurable: true
        });
        Slider.prototype._getThumbStyle = function (vertical, thumbOffsetPercent) {
            var direction = vertical ? 'bottom' : (Utilities_1.getRTL() ? 'right' : 'left');
            return _a = {},
                _a[direction] = thumbOffsetPercent + '%',
                _a;
            var _a;
        };
        Slider.prototype._onMouseDownOrTouchStart = function (event) {
            if (event.type === 'mousedown') {
                this._events.on(window, 'mousemove', this._onMouseMoveOrTouchMove, true);
                this._events.on(window, 'mouseup', this._onMouseUpOrTouchEnd, true);
            }
            else if (event.type === 'touchstart') {
                this._events.on(window, 'touchmove', this._onMouseMoveOrTouchMove, true);
                this._events.on(window, 'touchend', this._onMouseUpOrTouchEnd, true);
            }
            this._onMouseMoveOrTouchMove(event, true);
        };
        Slider.prototype._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
            var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
            var steps = (max - min) / step;
            var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
            var sliderLength = !this.props.vertical ? sliderPositionRect.width : sliderPositionRect.height;
            var stepLength = sliderLength / steps;
            var currentSteps;
            var distance;
            if (!this.props.vertical) {
                var left = this._getPosition(event, this.props.vertical);
                distance = Utilities_1.getRTL() ? sliderPositionRect.right - left : left - sliderPositionRect.left;
                currentSteps = distance / stepLength;
            }
            else {
                var bottom = this._getPosition(event, this.props.vertical);
                distance = sliderPositionRect.bottom - bottom;
                currentSteps = distance / stepLength;
            }
            var currentValue;
            var renderedValue;
            // The value shouldn't be bigger than max or be smaller than min.
            if (currentSteps > Math.floor(steps)) {
                renderedValue = currentValue = max;
            }
            else if (currentSteps < 0) {
                renderedValue = currentValue = min;
            }
            else {
                renderedValue = min + step * currentSteps;
                currentValue = min + step * Math.round(currentSteps);
            }
            this._updateValue(currentValue, renderedValue);
            if (!suppressEventCancelation) {
                event.preventDefault();
                event.stopPropagation();
            }
        };
        Slider.prototype._getPosition = function (event, vertical) {
            var currentPosition;
            switch (event.type) {
                case 'mousedown':
                case 'mousemove':
                    currentPosition = !vertical ? event.clientX : event.clientY;
                    break;
                case 'touchstart':
                case 'touchmove':
                    currentPosition = !vertical ? event.touches[0].clientX : event.touches[0].clientY;
                    break;
            }
            return currentPosition;
        };
        Slider.prototype._updateValue = function (value, renderedValue) {
            var _this = this;
            var interval = 1.0 / this.props.step;
            // Make sure value has correct number of decimal places based on steps without JS's floating point issues
            var roundedValue = Math.round(value * interval) / interval;
            var valueChanged = roundedValue !== this.state.value;
            this.setState({
                value: roundedValue,
                renderedValue: renderedValue
            }, function () {
                if (valueChanged && _this.props.onChange) {
                    _this.props.onChange(_this.state.value);
                }
            });
        };
        Slider.prototype._onMouseUpOrTouchEnd = function () {
            // Synchronize the renderedValue to the actual value.
            this.setState({
                renderedValue: this.state.value
            });
            this._events.off();
        };
        Slider.prototype._onKeyDown = function (event) {
            var value = this.state.value;
            var _a = this.props, max = _a.max, min = _a.min, step = _a.step;
            var diff = 0;
            switch (event.which) {
                case Utilities_1.getRTLSafeKeyCode(37 /* left */):
                case 40 /* down */:
                    diff = -step;
                    break;
                case Utilities_1.getRTLSafeKeyCode(39 /* right */):
                case 38 /* up */:
                    diff = step;
                    break;
                case 36 /* home */:
                    value = min;
                    break;
                case 35 /* end */:
                    value = max;
                    break;
                default:
                    return;
            }
            var newValue = Math.min(max, Math.max(min, value + diff));
            this._updateValue(newValue, newValue);
            event.preventDefault();
            event.stopPropagation();
        };
        Slider.defaultProps = {
            step: 1,
            min: 0,
            max: 10,
            showValue: true,
            disabled: false,
            vertical: false,
            buttonProps: {}
        };
        tslib_1.__decorate([
            Utilities_1.autobind
        ], Slider.prototype, "_onMouseDownOrTouchStart", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], Slider.prototype, "_onMouseMoveOrTouchMove", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], Slider.prototype, "_onMouseUpOrTouchEnd", null);
        tslib_1.__decorate([
            Utilities_1.autobind
        ], Slider.prototype, "_onKeyDown", null);
        return Slider;
    }(Utilities_1.BaseComponent));
    exports.Slider = Slider;
});
//# sourceMappingURL=Slider.js.map