"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Utilities_2 = require("../../Utilities");
var Label_1 = require("../../Label");
/**
 * @deprecated Unused.
 */
var ValuePosition;
(function (ValuePosition) {
    ValuePosition[ValuePosition["Previous"] = 0] = "Previous";
    ValuePosition[ValuePosition["Next"] = 1] = "Next";
})(ValuePosition = exports.ValuePosition || (exports.ValuePosition = {}));
var getClassNames = Utilities_2.classNamesFunction();
var SliderBase = /** @class */ (function (_super) {
    tslib_1.__extends(SliderBase, _super);
    function SliderBase(props) {
        var _this = _super.call(this, props) || this;
        _this._sliderLine = Utilities_1.createRef();
        _this._thumb = Utilities_1.createRef();
        _this._getAriaValueText = function (value) {
            if (_this.props.ariaValueText && value !== undefined) {
                return _this.props.ariaValueText(value);
            }
        };
        _this._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);
        };
        _this._onMouseMoveOrTouchMove = function (event, suppressEventCancelation) {
            if (!_this._sliderLine.current) {
                return;
            }
            var _a = _this.props, max = _a.max, min = _a.min, step = _a.step;
            var steps = (max - min) / step;
            var sliderPositionRect = _this._sliderLine.current.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();
            }
        };
        _this._onMouseUpOrTouchEnd = function () {
            // Synchronize the renderedValue to the actual value.
            _this.setState({
                renderedValue: _this.state.value
            });
            _this._events.off();
        };
        _this._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();
        };
        _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.
     */
    SliderBase.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
            });
        }
    };
    SliderBase.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, styles = _a.styles, theme = _a.theme;
        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 };
        var classNames = getClassNames(styles, {
            className: className,
            disabled: disabled,
            vertical: vertical,
            showTransitions: renderedValue === value,
            showValue: showValue,
            theme: theme
        });
        return (React.createElement("div", { className: classNames.root },
            label && (React.createElement(Label_1.Label, tslib_1.__assign({ className: classNames.titleLabel }, (ariaLabel ? {} : { htmlFor: this._id })), label)),
            React.createElement("div", { className: classNames.container },
                React.createElement("button", tslib_1.__assign({ "aria-valuenow": value, "aria-valuemin": min, "aria-valuemax": max, "aria-valuetext": this._getAriaValueText(value), "aria-label": ariaLabel || label }, onMouseDownProp, onTouchStartProp, onKeyDownProp, buttonProps, { className: Utilities_1.css(classNames.slideBox, buttonProps.className), id: this._id, disabled: disabled, type: "button", role: "slider" }),
                    React.createElement("div", { ref: this._sliderLine, className: classNames.line },
                        React.createElement("span", { ref: this._thumb, className: classNames.thumb, style: this._getThumbStyle(vertical, thumbOffsetPercent) }),
                        React.createElement("span", { className: Utilities_1.css(classNames.lineContainer, classNames.activeSection), style: (_c = {}, _c[lengthString] = thumbOffsetPercent + '%', _c) }),
                        React.createElement("span", { className: Utilities_1.css(classNames.lineContainer, classNames.inactiveSection), style: (_d = {}, _d[lengthString] = 100 - thumbOffsetPercent + '%', _d) }))),
                showValue && React.createElement(Label_1.Label, { className: classNames.valueLabel }, value))));
        var _c, _d;
    };
    SliderBase.prototype.focus = function () {
        if (this._thumb.current) {
            this._thumb.current.focus();
        }
    };
    Object.defineProperty(SliderBase.prototype, "value", {
        get: function () {
            return this.state.value;
        },
        enumerable: true,
        configurable: true
    });
    SliderBase.prototype._getThumbStyle = function (vertical, thumbOffsetPercent) {
        var direction = vertical ? 'bottom' : Utilities_1.getRTL() ? 'right' : 'left';
        return _a = {},
            _a[direction] = thumbOffsetPercent + '%',
            _a;
        var _a;
    };
    SliderBase.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;
    };
    SliderBase.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);
            }
        });
    };
    SliderBase.defaultProps = {
        step: 1,
        min: 0,
        max: 10,
        showValue: true,
        disabled: false,
        vertical: false,
        buttonProps: {}
    };
    return SliderBase;
}(Utilities_1.BaseComponent));
exports.SliderBase = SliderBase;
//# sourceMappingURL=Slider.base.js.map