'use strict';
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var Icon_1 = require("../Icon");
var Button_1 = require("../Button");
var utils_1 = require("./utils");
var prop_types_1 = __importDefault(require("prop-types"));
var index_en_US_1 = __importDefault(require("../../../lang/common/index-en_US"));
var VOLUME_BAR = 'audio-volume-bar';
var VOLUME_INDICATOR = 'audio-volume-current-pos';
var STEP = 0.03;
var VolumeControl = /** @class */ (function (_super) {
    __extends(VolumeControl, _super);
    function VolumeControl() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.volumeDrag = function (e) {
            var volumeBar = _this.refs[VOLUME_BAR];
            var volumeIndicator = _this.refs[VOLUME_INDICATOR];
            var distance = e.clientX - volumeBar.getBoundingClientRect().left;
            var processPercentage = utils_1.getProcessedPercentage(distance, volumeBar.offsetWidth, volumeIndicator.offsetWidth / 2);
            _this.props.setVolume(processPercentage);
        };
        _this.volumeDragStart = function (e) {
            e.stopPropagation();
            e.preventDefault();
            _this.draggingVolume = true;
            _this.volumeDrag(e);
            window.addEventListener('mousemove', _this.volumeDrag);
        };
        _this.windowDragEnd = function () {
            if (_this.draggingVolume) {
                window.removeEventListener('mousemove', _this.volumeDrag);
                _this.draggingVolume = false;
            }
        };
        _this.progressKeyDown = function (e) {
            var isValidKey = false;
            switch (e.keyCode) {
                case utils_1.KEY_CODE.RIGHT:
                case utils_1.KEY_CODE.UP:
                    isValidKey = true;
                    _this.volumeKeyHandler(STEP);
                    break;
                case utils_1.KEY_CODE.LEFT:
                case utils_1.KEY_CODE.DOWN:
                    isValidKey = true;
                    _this.volumeKeyHandler(-STEP);
                    break;
                case utils_1.KEY_CODE.PAGEUP:
                    isValidKey = true;
                    _this.volumeKeyHandler(STEP * 3);
                    break;
                case utils_1.KEY_CODE.PAGEDOWN:
                    isValidKey = true;
                    _this.volumeKeyHandler(-STEP * 3);
                    break;
                case utils_1.KEY_CODE.END:
                    isValidKey = true;
                    _this.volumeKeyHandler(1);
                    break;
                case utils_1.KEY_CODE.HOME:
                    isValidKey = true;
                    _this.volumeKeyHandler(-1);
                    break;
            }
            if (isValidKey) {
                e.stopPropagation();
                e.preventDefault();
            }
        };
        return _this;
    }
    VolumeControl.prototype.componentDidMount = function () {
        if (!this.initialized) {
            var volumeBar = this.refs[VOLUME_BAR];
            var volumeIndicator = this.refs[VOLUME_INDICATOR];
            this.volumeRightBoundary = 1 - volumeIndicator.offsetWidth / volumeBar.offsetWidth;
            // Drag start
            volumeBar.addEventListener('mousedown', this.volumeDragStart);
            // Drag end
            window.addEventListener('mouseup', this.windowDragEnd);
            //Key down
            volumeIndicator.addEventListener('keydown', this.progressKeyDown);
        }
        this.initialized = true;
    };
    VolumeControl.prototype.componentWillUnmount = function () {
        if (this.initialized) {
            this.refs[VOLUME_INDICATOR].removeEventListener('keydown', this.progressKeyDown);
            window.removeEventListener('mouseup', this.windowDragEnd);
            window.removeEventListener('mousedown', this.volumeDragStart);
            window.removeEventListener('mousemove', this.volumeDrag);
        }
    };
    VolumeControl.prototype.volumeKeyHandler = function (step) {
        if (step === void 0) { step = STEP; }
        var _a = this.props, volume = _a.volume, isMuted = _a.isMuted;
        var currentVolume = isMuted ? step : volume + step;
        if (currentVolume < 0) {
            currentVolume = 0;
        }
        else if (currentVolume > 1) {
            currentVolume = 1;
        }
        this.props.setVolume(currentVolume);
    };
    VolumeControl.prototype.render = function () {
        var _a = this.props, volume = _a.volume, isMuted = _a.isMuted, id = _a.id, setVolume = _a.setVolume;
        var volumePercent = volume * 100;
        var percent = volumePercent + '%';
        var indicatorStyle = {};
        if (isMuted) {
            volumePercent = 0;
            percent = '0%';
            indicatorStyle.left = 0;
        }
        else if (volume < 1) {
            indicatorStyle.left = percent;
            if (this.volumeRightBoundary && volume > this.volumeRightBoundary) {
                indicatorStyle.left = '100%';
                volumePercent = 100;
                indicatorStyle.WebkitTransform = 'translateX(-100%)';
                indicatorStyle.transform = indicatorStyle.WebkitTransform;
            }
        }
        return (react_1.default.createElement("div", { className: "audio-volume", "data-test-automation-id": "audioVolume" + id },
            react_1.default.createElement(Button_1.Button, { iconOnly: true, bsStyle: "link", testAutomationId: "audioVolumeMute" + id, className: "audio-volume-button", "aria-pressed": isMuted, "aria-label": isMuted ? this.props.unmuteLabel : this.props.muteLabel, onClick: function () {
                    setVolume(volume, !isMuted);
                } },
                react_1.default.createElement(Icon_1.Icon, { name: isMuted ? 'mute' : 'volume' })),
            react_1.default.createElement("div", { ref: VOLUME_BAR, className: "audio-process-bar " + VOLUME_BAR, "data-test-automation-id": "audioVolumeBar" + id },
                react_1.default.createElement("div", { className: "audio-process-bar-total", "data-test-automation-id": "audioVolumeTotal" + id }),
                react_1.default.createElement("div", { className: "audio-process-bar-left", style: { width: percent }, "data-test-automation-id": "audioVolumeLeft" + id }),
                react_1.default.createElement("div", { role: "slider", tabIndex: 0, "aria-label": this.props.volumeSlider, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(volumePercent), "aria-valuetext": Math.round(volumePercent) + '%', ref: VOLUME_INDICATOR, className: "audio-process-indicator", style: indicatorStyle, "data-test-automation-id": "audioVolumeIndicator" + id }))));
    };
    VolumeControl.propTypes = {
        setVolume: prop_types_1.default.func.isRequired,
        volume: prop_types_1.default.number.isRequired,
        isMuted: prop_types_1.default.bool,
        id: prop_types_1.default.string,
        muteLabel: prop_types_1.default.string,
        unmuteLabel: prop_types_1.default.string,
        volumeSlider: prop_types_1.default.string
    };
    VolumeControl.defaultProps = {
        isMuted: false,
        id: 'volumeControl',
        get muteLabel() {
            return index_en_US_1.default.MUTE;
        },
        get unmuteLabel() {
            return index_en_US_1.default.UNMUTE;
        },
        get volumeSlider() {
            return index_en_US_1.default.VOLUME_SLIDER;
        }
    };
    return VolumeControl;
}(react_1.default.Component));
exports.VolumeControl = VolumeControl;
//# sourceMappingURL=VolumeControl.js.map