'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.VolumeControl = void 0;

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _Icon = require("../Icon");

var _Button = require("../Button");

var _utils = require("./utils");

var _propTypes = _interopRequireDefault(require("prop-types"));

var VOLUME_BAR = 'audio-volume-bar';
var VOLUME_INDICATOR = 'audio-volume-current-pos';
var STEP = 0.03;

var VolumeControl =
/*#__PURE__*/
function (_React$Component) {
  (0, _inheritsLoose2.default)(VolumeControl, _React$Component);

  function VolumeControl() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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 = (0, _utils.getProcessedPercentage)(distance, volumeBar.offsetWidth, volumeIndicator.offsetWidth / 2);

      _this.props.setVolume(processPercentage);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "volumeDragStart", function (e) {
      e.stopPropagation();
      e.preventDefault();
      _this.draggingVolume = true;

      _this.volumeDrag(e);

      window.addEventListener('mousemove', _this.volumeDrag);
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "windowDragEnd", function () {
      if (_this.draggingVolume) {
        window.removeEventListener('mousemove', _this.volumeDrag);
        _this.draggingVolume = false;
      }
    });
    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "progressKeyDown", function (e) {
      var isValidKey = false;

      switch (e.keyCode) {
        case _utils.KEY_CODE.RIGHT:
        case _utils.KEY_CODE.UP:
          isValidKey = true;

          _this.volumeKeyHandler(STEP);

          break;

        case _utils.KEY_CODE.LEFT:
        case _utils.KEY_CODE.DOWN:
          isValidKey = true;

          _this.volumeKeyHandler(-STEP);

          break;

        case _utils.KEY_CODE.PAGEUP:
          isValidKey = true;

          _this.volumeKeyHandler(STEP * 3);

          break;

        case _utils.KEY_CODE.PAGEDOWN:
          isValidKey = true;

          _this.volumeKeyHandler(-STEP * 3);

          break;

        case _utils.KEY_CODE.END:
          isValidKey = true;

          _this.volumeKeyHandler(1);

          break;

        case _utils.KEY_CODE.HOME:
          isValidKey = true;

          _this.volumeKeyHandler(-1);

          break;
      }

      if (isValidKey) {
        e.stopPropagation();
        e.preventDefault();
      }
    });
    return _this;
  }

  var _proto = VolumeControl.prototype;

  _proto.componentDidMount = function componentDidMount() {
    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;
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    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);
    }
  };

  _proto.volumeKeyHandler = function volumeKeyHandler(step) {
    if (step === void 0) {
      step = STEP;
    }

    var _this$props = this.props,
        volume = _this$props.volume,
        isMuted = _this$props.isMuted;
    var currentVolume = isMuted ? step : volume + step;

    if (currentVolume < 0) {
      currentVolume = 0;
    } else if (currentVolume > 1) {
      currentVolume = 1;
    }

    this.props.setVolume(currentVolume);
  };

  _proto.render = function render() {
    var _this$props2 = this.props,
        volume = _this$props2.volume,
        isMuted = _this$props2.isMuted,
        id = _this$props2.id,
        setVolume = _this$props2.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.default.createElement("div", {
      className: "audio-volume",
      "data-test-automation-id": "audioVolume" + id
    }, _react.default.createElement(_Button.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 onClick() {
        setVolume(volume, !isMuted);
      }
    }, _react.default.createElement(_Icon.Icon, {
      name: isMuted ? 'mute' : 'volume'
    })), _react.default.createElement("div", {
      ref: VOLUME_BAR,
      className: "audio-process-bar " + VOLUME_BAR,
      "data-test-automation-id": "audioVolumeBar" + id
    }, _react.default.createElement("div", {
      className: "audio-process-bar-total",
      "data-test-automation-id": "audioVolumeTotal" + id
    }), _react.default.createElement("div", {
      className: "audio-process-bar-left",
      style: {
        width: percent
      },
      "data-test-automation-id": "audioVolumeLeft" + id
    }), _react.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
    })));
  };

  return VolumeControl;
}(_react.default.Component);

exports.VolumeControl = VolumeControl;
(0, _defineProperty2.default)(VolumeControl, "propTypes", {
  setVolume: _propTypes.default.func.isRequired,
  volume: _propTypes.default.number.isRequired,
  isMuted: _propTypes.default.bool,
  id: _propTypes.default.string,
  muteLabel: _propTypes.default.string,
  unmuteLabel: _propTypes.default.string,
  volumeSlider: _propTypes.default.string
});
(0, _defineProperty2.default)(VolumeControl, "defaultProps", {
  isMuted: false,
  id: 'volumeControl',
  muteLabel: 'TRANSLATE:MUTE',
  unmuteLabel: 'TRANSLATE:UNMUTE',
  volumeSlider: 'TRANSLATE:VOLUME_SLIDER'
});