'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var ui_ProgressBar = require('./ProgressBar.js');
var VoicePlayer_useVoicePlayer = require('../VoicePlayer/useVoicePlayer.js');
var ui_PlaybackTime = require('./PlaybackTime.js');
var ui_Loader = require('./Loader.js');
var ui_Icon = require('./Icon.js');
var ui_Label = require('../index-bff918b2.js');
var VoicePlayer_context = require('../index-ce276e22.js');
require('../consts-a6f34df8.js');
require('../VoiceRecorder/context.js');
require('../LocalizationContext-6adf6aa8.js');
require('../stringSet-5157206d.js');
require('../index-6a7f94de.js');
require('./Modal.js');
require('react-dom');
require('../index-f84d188a.js');
require('./Button.js');
require('prop-types');
require('./IconButton.js');
require('../_rollupPluginBabelHelpers-ea66c137.js');
require('../MediaQueryContext-1dd78ce3.js');
require('../useSendbirdStateContext.js');
require('../withSendbird.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

const VoiceMessageItemBody = _ref => {
  var _message$reactions2;
  let {
    className,
    message,
    channelUrl,
    isByMe = false,
    isReactionEnabled = false
  } = _ref;
  const [usingReaction, setUsingReaction] = React.useState(false);
  const {
    play,
    // do not pause on unmount, because on desktop layout
    // the component can be paused when it is played from
    // channel and same message is unmounted from the thread
    pause,
    playbackTime = 0,
    duration,
    playingStatus = VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE
  } = VoicePlayer_useVoicePlayer.useVoicePlayer({
    channelUrl,
    key: `${message === null || message === void 0 ? void 0 : message.messageId}`,
    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
  });
  React.useEffect(() => {
    var _message$reactions;
    if (isReactionEnabled && (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : _message$reactions.length) > 0) {
      setUsingReaction(true);
    } else {
      setUsingReaction(false);
    }
  }, [isReactionEnabled, message === null || message === void 0 ? void 0 : (_message$reactions2 = message.reactions) === null || _message$reactions2 === void 0 ? void 0 : _message$reactions2.length]);
  const progresBarMaxSize = React.useMemo(() => {
    if (message !== null && message !== void 0 && message.metaArrays) {
      var _message$metaArrays$f;
      const duration = message === null || message === void 0 ? void 0 : (_message$metaArrays$f = message.metaArrays.find(metaArray => metaArray.key === 'KEY_VOICE_MESSAGE_DURATION')) === null || _message$metaArrays$f === void 0 ? void 0 : _message$metaArrays$f.value[0];
      return duration && parseInt(duration);
    }
    return 1;
  }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: `sendbird-voice-message-item-body ${className} ${usingReaction ? 'is-reactions-contained' : ''}`
  }, /*#__PURE__*/React__default["default"].createElement(ui_ProgressBar.ProgressBar, {
    className: "sendbird-voice-message-item-body__progress-bar",
    maxSize: duration || progresBarMaxSize,
    currentSize: playbackTime,
    colorType: isByMe ? ui_ProgressBar.ProgressBarColorTypes.PRIMARY : ui_ProgressBar.ProgressBarColorTypes.GRAY
  }), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button"
  }, (playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.IDLE || playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PAUSED) && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button",
    onClick: play
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    width: "18px",
    height: "18px",
    type: ui_Icon.IconTypes.PLAY,
    fillColor: ui_Icon.IconColors.PRIMARY
  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PREPARING && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
    width: "22.2px",
    height: "22.2px"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    width: "22.2px",
    height: "22.2px",
    type: ui_Icon.IconTypes.SPINNER,
    fillColor: ui_Icon.IconColors.PRIMARY_2
  })), playingStatus === VoicePlayer_context.VOICE_PLAYER_STATUS.PLAYING && /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button",
    onClick: () => {
      pause();
    }
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause"
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
  }), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
  })))), /*#__PURE__*/React__default["default"].createElement(ui_PlaybackTime.PlaybackTime, {
    className: "sendbird-voice-message-item-body__playback-time",
    time: progresBarMaxSize - playbackTime,
    labelType: ui_Label.LabelTypography.BODY_1,
    labelColor: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1
  }));
};

exports.VoiceMessageItemBody = VoiceMessageItemBody;
exports["default"] = VoiceMessageItemBody;
//# sourceMappingURL=VoiceMessageItemBody.js.map
