"use strict";

require("core-js/modules/web.dom-collections.iterator.js");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VolumeButton = VolumeButton;
exports.default = void 0;

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

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

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _VolumeDown = _interopRequireDefault(require("@material-ui/icons/VolumeDown"));

var _VolumeOff = _interopRequireDefault(require("@material-ui/icons/VolumeOff"));

var _VolumeUp = _interopRequireDefault(require("@material-ui/icons/VolumeUp"));

var _VolumeControl = _interopRequireDefault(require("./VolumeControl"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function VolumeButton(props) {
  const {
    volume,
    setVolume,
    placement = 'above',
    ...buttonProps
  } = props;

  const [anchorEl, setAnchorEl] = _react.default.useState(null);

  const VolumeIcon = volume === 0 ? _VolumeOff.default : volume < 0.35 ? _VolumeDown.default : _VolumeUp.default;

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const belowButton = {
    anchorOrigin: {
      vertical: 'bottom',
      horizontal: 'center'
    },
    transformOrigin: {
      vertical: 'center',
      horizontal: 'left'
    }
  };
  const aboveButton = {
    anchorOrigin: {
      vertical: 'top',
      horizontal: 'left'
    },
    transformOrigin: {
      vertical: 'bottom',
      horizontal: 'left'
    }
  };
  const placementOrigins = placement === 'above' ? aboveButton : belowButton;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
    open: open,
    anchorEl: anchorEl,
    onClose: handleClose
  }, placementOrigins), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: 250,
      height: 'auto',
      padding: '12px 16px 12px 16px'
    }
  }, /*#__PURE__*/_react.default.createElement(_VolumeControl.default, {
    volume: volume,
    setVolume: setVolume
  }))), /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
    onClick: handleClick
  }, buttonProps), /*#__PURE__*/_react.default.createElement(VolumeIcon, null)));
}

VolumeButton.propTypes = {
  volume: _propTypes.default.number,
  setVolume: _propTypes.default.func,
  placement: _propTypes.default.string
};
var _default = VolumeButton;
exports.default = _default;