var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", 'react', '../../common/BaseComponent', '../../utilities/KeyCodes', '../../Label', '../../utilities/css', '../../utilities/rtl', './Slider.scss'], function (require, exports, React, BaseComponent_1, KeyCodes_1, Label_1, css_1, rtl_1) {
    "use strict";
    (function (ValuePosition) {
        ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
        ValuePosition[ValuePosition["Next"] = 1] = "Next";
    })(exports.ValuePosition || (exports.ValuePosition = {}));
    var ValuePosition = exports.ValuePosition;
    var _instance = 0;
    var Slider = (function (_super) {
        __extends(Slider, _super);
        function Slider(props) {
            _super.call(this, props);
            this._onMouseDownOrTouchStart = this._onMouseDownOrTouchStart.bind(this);
            this._onMouseMoveOrTouchMove = this._onMouseMoveOrTouchMove.bind(this);
            this._onMouseUpOrTouchEnd = this._onMouseUpOrTouchEnd.bind(this);
            this._onKeyDown = this._onKeyDown.bind(this);
            this._id = "Slider-" + _instance++;
            var value = props.value || props.defaultValue || props.min;
            this.state = {
                value: value,
                renderedValue: value
            };
        }
        /**
         * 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
                });
            }
        };
        Slider.prototype.render = function () {
            var _a = this.props, min = _a.min, max = _a.max, label = _a.label, showValue = _a.showValue, disabled = _a.disabled, className = _a.className, ariaLabel = _a.ariaLabel;
            var _b = this.state, value = _b.value, renderedValue = _b.renderedValue;
            var thumbOffsetPercent = (renderedValue - min) / (max - min) * 100;
            var onMouseDownProp = disabled ? {} : { onMouseDown: this._onMouseDownOrTouchStart };
            var onTouchStartProp = disabled ? {} : { onTouchStart: this._onMouseDownOrTouchStart };
            var onKeyDownProp = disabled ? {} : { onKeyDown: this._onKeyDown };
            return (React.createElement("div", {className: css_1.css('ms-Slider', className, {
                'ms-Slider-enabled': !disabled,
                'ms-Slider-disabled': disabled
            }), ref: 'root'}, label && (React.createElement(Label_1.Label, React.__spread({}, ariaLabel ? {} : { 'htmlFor': this._id }), label)), React.createElement("div", {className: 'ms-Slider-container'}, React.createElement("div", React.__spread({className: css_1.css('ms-Slider-slideBox', {
                'ms-Slider-showValue': showValue,
                'ms-Slider-showTransitions': (renderedValue === value)
            })}, disabled ? {} : { 'tabIndex': 0 }, onMouseDownProp, onTouchStartProp, onKeyDownProp), React.createElement("div", {ref: 'sliderLine', className: 'ms-Slider-line'}, React.createElement("span", React.__spread({ref: 'thumb', id: this._id, className: 'ms-Slider-thumb'}, ariaLabel ? { 'aria-label': ariaLabel } : {}, {role: 'slider', "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, style: rtl_1.getRTL() ?
                { 'right': thumbOffsetPercent + '%' } :
                { 'left': thumbOffsetPercent + '%' }})), React.createElement("span", {className: 'ms-Slider-active', style: { 'width': thumbOffsetPercent + '%' }}), React.createElement("span", {className: 'ms-Slider-inactive', style: { 'width': (100 - thumbOffsetPercent) + '%' }}))), showValue && React.createElement("label", {className: 'ms-Label ms-Slider-value'}, value))));
        };
        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._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, onChange = _a.onChange;
            var steps = (max - min) / step;
            var sliderLength = this.refs.sliderLine.offsetWidth;
            var stepLength = sliderLength / steps;
            var sliderPositionRect = this.refs.sliderLine.getBoundingClientRect();
            var currentSteps;
            if (event.type === 'mousedown' || event.type === 'mousemove') {
                currentSteps = rtl_1.getRTL() ?
                    (sliderPositionRect.right - event.clientX) / stepLength :
                    (event.clientX - sliderPositionRect.left) / stepLength;
            }
            else if (event.type === 'touchstart' || event.type === 'touchmove') {
                currentSteps = rtl_1.getRTL() ?
                    (sliderPositionRect.right - event.touches[0].clientX) / stepLength :
                    (event.touches[0].clientX - sliderPositionRect.left) / 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.setState({
                value: currentValue,
                renderedValue: renderedValue
            });
            if (onChange) {
                onChange(currentValue);
            }
            if (!suppressEventCancelation) {
                event.preventDefault();
                event.stopPropagation();
            }
        };
        Slider.prototype._onMouseUpOrTouchEnd = function () {
            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, onChange = _a.onChange;
            var diff = 0;
            if (event.which === rtl_1.getRTLSafeKeyCode(KeyCodes_1.KeyCodes.left)) {
                diff = -step;
            }
            else if (event.which === rtl_1.getRTLSafeKeyCode(KeyCodes_1.KeyCodes.right)) {
                diff = step;
            }
            else {
                return;
            }
            var newValue = Math.min(max, Math.max(min, value + diff));
            this.setState({
                value: newValue,
                renderedValue: newValue
            });
            if (onChange) {
                onChange(newValue);
            }
            event.preventDefault();
            event.stopPropagation();
        };
        Slider.defaultProps = {
            step: 1,
            min: 0,
            max: 10,
            showValue: true,
            disabled: false
        };
        return Slider;
    }(BaseComponent_1.BaseComponent));
    exports.Slider = Slider;
});
