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-4372fcec.js';
import { a as VOICE_PLAYER_STATUS } from '../index-7d496661.js';
import '../consts-33537265.js';
import '../VoiceRecorder/context.js';
import '../LocalizationContext-b2390bf8.js';
import '../stringSet-eefbc798.js';
import '../index-67135027.js';
import './Modal.js';
import 'react-dom';
import '../index-896545a0.js';
import './Button.js';
import 'prop-types';
import './IconButton.js';
import '../_rollupPluginBabelHelpers-4f8ebde4.js';
import '../MediaQueryContext-b4904a2e.js';
import '../useSendbirdStateContext.js';
import '../withSendbird.js';

const VoiceMessageItemBody = _ref => {
  var _message$reactions2;
  let {
    className,
    message,
    channelUrl,
    isByMe = false,
    isReactionEnabled = false
  } = _ref;
  const [usingReaction, setUsingReaction] = 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 = VOICE_PLAYER_STATUS.IDLE
  } = useVoicePlayer({
    channelUrl,
    key: `${message === null || message === void 0 ? void 0 : message.messageId}`,
    audioFileUrl: message === null || message === void 0 ? void 0 : message.url
  });
  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 = 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.createElement("div", {
    className: `sendbird-voice-message-item-body ${className} ${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 === VOICE_PLAYER_STATUS.IDLE || playingStatus === VOICE_PLAYER_STATUS.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 === VOICE_PLAYER_STATUS.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 === VOICE_PLAYER_STATUS.PLAYING && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-item-body__status-button__button",
    onClick: () => {
      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
