function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useState, useEffect, useRef } from 'react';
import { ReactMic } from '@cleandersonlobo/react-mic';
import Icon from '@mdi/react';
import { mdiCloseCircle, mdiCheckCircle, mdiCheckboxBlankCircle } from '@mdi/js';
import PropTypes from 'prop-types';
import { IconButton } from '@livechat/ui-kit';
import Timer from 'react-compound-timer';
import { Typography, makeStyles } from '@material-ui/core';
import { defaultBlack, defaultWhite, defaultGrey2 } from '@tecsinapse/ui-kit/build/colors';
var useStyle = makeStyles({
  reactMic: {
    opacity: '0.30'
  },
  recordingText: {
    color: defaultGrey2,
    fontSize: '12px',
    lineHeight: 1
  },
  recordingTime: {
    color: defaultGrey2,
    fontSize: '18px',
    lineHeight: 1,
    fontWeight: 900
  }
});
export var MicRecorder = function MicRecorder(_ref) {
  var onStopRecording = _ref.onStopRecording,
      iconSize = _ref.iconSize,
      flexGrow = _ref.flexGrow,
      waveWidth = _ref.waveWidth,
      waveHeight = _ref.waveHeight;

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      recording = _useState2[0],
      setRecording = _useState2[1];

  var _useState3 = useState(1),
      _useState4 = _slicedToArray(_useState3, 2),
      opacity = _useState4[0],
      setOpacity = _useState4[1];

  var accepted = useRef(false);
  var classes = useStyle();

  var stopRecording = function stopRecording(acceptedClicked) {
    accepted.current = acceptedClicked;
    setRecording(false);
  };

  var onStop = function onStop(recordedBlob) {
    onStopRecording(recordedBlob, accepted.current);
  };

  useEffect(function () {
    var animation = setInterval(function () {
      return setOpacity(function (oldOpacity) {
        return oldOpacity > 0 ? 0 : 1;
      });
    }, 1000);
    return function () {
      clearInterval(animation);
    };
  }, []);
  return React.createElement("div", {
    style: {
      display: 'flex',
      flexGrow: flexGrow,
      justifyContent: 'space-between',
      alignItems: 'center'
    }
  }, React.createElement(IconButton, {
    fill: true,
    key: "cancelRecord",
    onClick: function onClick() {
      return stopRecording(false);
    }
  }, React.createElement(Icon, {
    path: mdiCloseCircle,
    size: iconSize,
    color: "red"
  })), React.createElement("div", {
    style: {
      display: 'flex'
    }
  }, React.createElement(ReactMic, {
    className: classes.reactMic,
    height: waveHeight,
    width: waveWidth,
    record: recording,
    onStop: onStop,
    strokeColor: defaultBlack,
    backgroundColor: defaultWhite,
    mimeType: "audio/mp3",
    visualSetting: "sinewave" // frequencyBars

  })), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement(Typography, {
    variant: "subtitle2",
    className: classes.recordingText
  }, "GRAVANDO")), React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-around'
    }
  }, React.createElement(Icon, {
    path: mdiCheckboxBlankCircle,
    size: 0.5,
    color: "red",
    style: {
      opacity: opacity,
      padding: '2px 6px 0px 0px'
    }
  }), React.createElement(Timer, {
    formatValue: function formatValue(value) {
      return "".concat(value < 10 ? "0".concat(value) : value);
    }
  }, React.createElement(Typography, {
    variant: "h6",
    className: classes.recordingTime
  }, React.createElement(Timer.Minutes, null), ":", React.createElement(Timer.Seconds, null))))), React.createElement(IconButton, {
    fill: true,
    key: "confirmRecord",
    onClick: function onClick() {
      return stopRecording(true);
    }
  }, React.createElement(Icon, {
    path: mdiCheckCircle,
    size: iconSize,
    color: "green"
  })));
};
MicRecorder.defaultProps = {
  onStopRecording: undefined,
  iconSize: 1.5,
  flexGrow: 1,
  waveWidth: 200,
  waveHeight: 30
};
MicRecorder.propTypes = {
  onStopRecording: PropTypes.func,
  iconSize: PropTypes.number,
  flexGrow: PropTypes.number,
  waveWidth: PropTypes.number,
  waveHeight: PropTypes.number
};
export default MicRecorder;