'use strict';

import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React from 'react';
import { Icon } from '../Icon';
import { Button } from '../Button';
import { getProcessedPercentage, KEY_CODE } from './utils';
import PropTypes from 'prop-types';
var VOLUME_BAR = 'audio-volume-bar';
var VOLUME_INDICATOR = 'audio-volume-current-pos';
var STEP = 0.03;
export var VolumeControl =
/*#__PURE__*/
function (_React$Component) {
  _inheritsLoose(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;

    _defineProperty(_assertThisInitialized(_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 = getProcessedPercentage(distance, volumeBar.offsetWidth, volumeIndicator.offsetWidth / 2);

      _this.props.setVolume(processPercentage);
    });

    _defineProperty(_assertThisInitialized(_this), "volumeDragStart", function (e) {
      e.stopPropagation();
      e.preventDefault();
      _this.draggingVolume = true;

      _this.volumeDrag(e);

      window.addEventListener('mousemove', _this.volumeDrag);
    });

    _defineProperty(_assertThisInitialized(_this), "windowDragEnd", function () {
      if (_this.draggingVolume) {
        window.removeEventListener('mousemove', _this.volumeDrag);
        _this.draggingVolume = false;
      }
    });

    _defineProperty(_assertThisInitialized(_this), "progressKeyDown", function (e) {
      var isValidKey = false;

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

          _this.volumeKeyHandler(STEP);

          break;

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

          _this.volumeKeyHandler(-STEP);

          break;

        case KEY_CODE.PAGEUP:
          isValidKey = true;

          _this.volumeKeyHandler(STEP * 3);

          break;

        case KEY_CODE.PAGEDOWN:
          isValidKey = true;

          _this.volumeKeyHandler(-STEP * 3);

          break;

        case KEY_CODE.END:
          isValidKey = true;

          _this.volumeKeyHandler(1);

          break;

        case 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.createElement("div", {
      className: "audio-volume",
      "data-test-automation-id": "audioVolume" + id
    }, React.createElement(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.createElement(Icon, {
      name: isMuted ? 'mute' : 'volume'
    })), React.createElement("div", {
      ref: VOLUME_BAR,
      className: "audio-process-bar " + VOLUME_BAR,
      "data-test-automation-id": "audioVolumeBar" + id
    }, React.createElement("div", {
      className: "audio-process-bar-total",
      "data-test-automation-id": "audioVolumeTotal" + id
    }), React.createElement("div", {
      className: "audio-process-bar-left",
      style: {
        width: percent
      },
      "data-test-automation-id": "audioVolumeLeft" + id
    }), React.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.Component);

_defineProperty(VolumeControl, "propTypes", {
  setVolume: PropTypes.func.isRequired,
  volume: PropTypes.number.isRequired,
  isMuted: PropTypes.bool,
  id: PropTypes.string,
  muteLabel: PropTypes.string,
  unmuteLabel: PropTypes.string,
  volumeSlider: PropTypes.string
});

_defineProperty(VolumeControl, "defaultProps", {
  isMuted: false,
  id: 'volumeControl',
  muteLabel: 'TRANSLATE:MUTE',
  unmuteLabel: 'TRANSLATE:UNMUTE',
  volumeSlider: 'TRANSLATE:VOLUME_SLIDER'
});