import React__default, { useState, useEffect, useMemo } from 'react';
import { ProgressBar, ProgressBarColorTypes } from './ProgressBar.js';
import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
import { PlaybackTime } from './PlaybackTime.js';
import Loader from './Loader.js';
import Icon, { IconTypes, IconColors } from './Icon.js';
import { a as LabelTypography, b as LabelColors } from '../index-46d8dde5.js';
import { a as VoicePlayerStatus } from '../index-c29a819f.js';
import '../consts-37ea645a.js';
import '../VoiceRecorder/context.js';
import '../lame.all.js';
import '../tslib.es6-645dedf8.js';
import 'prop-types';
import '../stringSet-fd70cba0.js';

var VoiceMessageItemBody = function (_a) {
  var _b;

  var className = _a.className,
      message = _a.message,
      channelUrl = _a.channelUrl,
      _c = _a.isByMe,
      isByMe = _c === void 0 ? false : _c,
      _d = _a.isReactionEnabled,
      isReactionEnabled = _d === void 0 ? false : _d;

  var _e = useState(false),
      usingReaction = _e[0],
      setUsingReaction = _e[1];

  var _f = useVoicePlayer({
    channelUrl: channelUrl,
    key: "".concat(message === null || message === void 0 ? void 0 : message.messageId),
    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
  }),
      play = _f.play,
      pause = _f.pause,
      _g = _f.playbackTime,
      playbackTime = _g === void 0 ? 0 : _g,
      duration = _f.duration,
      _h = _f.playingStatus,
      playingStatus = _h === void 0 ? VoicePlayerStatus.IDLE : _h;

  useEffect(function () {
    var _a;

    if (isReactionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length) > 0) {
      setUsingReaction(true);
    } else {
      setUsingReaction(false);
    }
  }, [isReactionEnabled, (_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length]);
  var progresBarMaxSize = useMemo(function () {
    var _a;

    if (message === null || message === void 0 ? void 0 : message.metaArrays) {
      var duration_1 = (_a = message === null || message === void 0 ? void 0 : message.metaArrays.find(function (metaArray) {
        return metaArray.key === 'KEY_VOICE_MESSAGE_DURATION';
      })) === null || _a === void 0 ? void 0 : _a.value[0];
      return duration_1 && parseInt(duration_1);
    }

    return 1;
  }, [message === null || message === void 0 ? void 0 : message.metaArrays]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body ".concat(className, " ").concat(usingReaction ? 'is-reactions-contained' : '')
  }, /*#__PURE__*/React__default.createElement(ProgressBar, {
    className: "sendbird-voice-message-item-body__progress-bar",
    maxSize: duration || progresBarMaxSize,
    currentSize: playbackTime,
    colorType: isByMe ? ProgressBarColorTypes.PRIMARY : ProgressBarColorTypes.GRAY
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button"
  }, (playingStatus === VoicePlayerStatus.IDLE || playingStatus === VoicePlayerStatus.PAUSED) && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button",
    onClick: play
  }, /*#__PURE__*/React__default.createElement(Icon, {
    width: "18px",
    height: "18px",
    type: IconTypes.PLAY,
    fillColor: IconColors.PRIMARY
  })), playingStatus === VoicePlayerStatus.PREPARING && /*#__PURE__*/React__default.createElement(Loader, {
    width: "22.2px",
    height: "22.2px"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    width: "22.2px",
    height: "22.2px",
    type: IconTypes.SPINNER,
    fillColor: IconColors.PRIMARY_2
  })), playingStatus === VoicePlayerStatus.PLAYING && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button",
    onClick: function () {
      pause();
    }
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button__pause__inner"
  })))), /*#__PURE__*/React__default.createElement(PlaybackTime, {
    className: "sendbird-voice-message-item-body__playback-time",
    time: progresBarMaxSize - playbackTime,
    labelType: LabelTypography.BODY_1,
    labelColor: isByMe ? LabelColors.ONCONTENT_1 : LabelColors.ONBACKGROUND_1
  }));
};

export { VoiceMessageItemBody, VoiceMessageItemBody as default };
//# sourceMappingURL=VoiceMessageItemBody.js.map
