"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
require("core-js/modules/es.number.constructor.js");
var _react = _interopRequireDefault(require("react"));
var _uiCore = require("@megafon/ui-core");
var _uiHelpers = require("@megafon/ui-helpers");
var _AudioRange = _interopRequireDefault(require("./AudioRange"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var NoVolumeIcon = function NoVolumeIcon(props) {
  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
    viewBox: "0 0 24 24"
  }, props), /*#__PURE__*/_react["default"].createElement("path", {
    d: "M14 20.15c0 .322.299.56.606.467a9.004 9.004 0 004.96-13.493l-1.525 1.34a7.002 7.002 0 01-3.687 10.13.525.525 0 00-.354.488v1.069z"
  }), /*#__PURE__*/_react["default"].createElement("path", {
    d: "M16.094 10.174c.261.56.406 1.177.406 1.826 0 1.426-.7 2.701-1.8 3.548-.3.23-.7-.004-.7-.382v-3.152l2.094-1.84zm-1.225-1.586L14 9.35v-.517c0-.378.4-.613.7-.382.058.044.114.09.169.136zm1.923-1.69a6.998 6.998 0 00-2.438-1.491.525.525 0 01-.354-.489V3.849c0-.32.299-.559.606-.466a8.994 8.994 0 013.694 2.19l-1.508 1.325zM12 11.108V5.36a.5.5 0 00-.342-.474l-.822-.274a.5.5 0 00-.553.167L7.15 8.807A.5.5 0 016.756 9H3.707a.5.5 0 00-.353.146l-.207.208A.5.5 0 003 9.707v4.586a.5.5 0 00.147.353l.207.208a.5.5 0 00.353.146h3.049a.5.5 0 01.394.193l.082.105L12 11.108zM8.462 16.88l1.82 2.34a.5.5 0 00.554.168l.822-.274A.5.5 0 0012 18.64v-4.87l-3.538 3.11zm-5.488 3.563a.5.5 0 01.046-.705L21.497 3.503a.5.5 0 11.66.751L3.68 20.49a.5.5 0 01-.706-.046z"
  }));
};
var VolumeIcon = function VolumeIcon(props) {
  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
    viewBox: "0 0 24 24"
  }, props), /*#__PURE__*/_react["default"].createElement("path", {
    d: "M14 20.15c0 .322.299.56.606.467a9.004 9.004 0 000-17.234.475.475 0 00-.606.466v1.069c0 .221.146.414.354.489a7.002 7.002 0 010 13.186.525.525 0 00-.354.489v1.069zM3.146 14.646A.5.5 0 013 14.293V9.707a.5.5 0 01.146-.353l.208-.208A.5.5 0 013.707 9h3.048a.5.5 0 00.395-.193l3.133-4.028a.5.5 0 01.553-.167l.822.274A.5.5 0 0112 5.36v13.28a.5.5 0 01-.342.474l-.822.274a.5.5 0 01-.553-.167L7.15 15.193A.5.5 0 006.755 15H3.707a.5.5 0 01-.353-.146l-.208-.208z"
  }), /*#__PURE__*/_react["default"].createElement("path", {
    d: "M16.5 12c0 1.426-.7 2.701-1.8 3.548-.3.23-.7-.004-.7-.382V8.834c0-.378.4-.613.7-.382 1.1.847 1.8 2.122 1.8 3.548z"
  }));
};
var cn = (0, _uiHelpers.cnCreate)('mfui-audio-volume');
var AudioVolume = function AudioVolume(_ref) {
  var onChangeAudioVolume = _ref.onChangeAudioVolume;
  var tooltipTrigger = _react["default"].useRef(null);
  var _React$useState = _react["default"].useState(0.3),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    trackVolume = _React$useState2[0],
    setTrackVolume = _React$useState2[1];
  var volumeColorPercent = _react["default"].useMemo(function () {
    return trackVolume * 100;
  }, [trackVolume]);
  var handleScrubVolume = function handleScrubVolume(e) {
    var currentVolume = Number(e.target.value);
    setTrackVolume(currentVolume);
    onChangeAudioVolume === null || onChangeAudioVolume === void 0 ? void 0 : onChangeAudioVolume(currentVolume);
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: cn()
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: cn('icon-area'),
    ref: tooltipTrigger
  }, /*#__PURE__*/_react["default"].createElement(VolumeIcon, {
    className: cn('icon', {
      visible: !!trackVolume
    })
  }), /*#__PURE__*/_react["default"].createElement(NoVolumeIcon, {
    className: cn('icon', {
      visible: !trackVolume
    })
  })), /*#__PURE__*/_react["default"].createElement(_uiCore.Tooltip, {
    classes: {
      content: "".concat(cn('tooltip-content')),
      contentShadow: "".concat(cn('tooltip-content-shadow'))
    },
    triggerElement: tooltipTrigger,
    triggerEvent: "click",
    placement: "top",
    paddings: "none"
  }, /*#__PURE__*/_react["default"].createElement(_AudioRange["default"], {
    className: cn('range'),
    maxValue: "1",
    value: trackVolume,
    step: "0.01",
    colorPercent: volumeColorPercent || 0,
    onChange: handleScrubVolume,
    dataAttrs: {
      'data-testid': 'AudioVolumeRange'
    }
  })));
};
var _default = exports["default"] = AudioVolume;