import React__default, { useRef, useState, useEffect } from 'react';
import { u as useLocalization } from './LocalizationContext-b2390bf8.js';
import { useVoicePlayer } from './VoicePlayer/useVoicePlayer.js';
import { useVoiceRecorder, VoiceRecorderStatus } from './VoiceRecorder/useVoiceRecorder.js';
import { a as isDisabledBecauseFrozen, b as isDisabledBecauseMuted } from './ChannelProvider-498954bf.js';
import { V as VoiceMessageInputStatus, a as VoiceMessageInput } from './index-ebab784c.js';
import Modal from './ui/Modal.js';
import Button, { ButtonTypes, ButtonSizes } from './ui/Button.js';
import useSendbirdStateContext from './useSendbirdStateContext.js';
import { a as VOICE_RECORDER_DEFAULT_MIN } from './consts-33537265.js';
import { a as VOICE_PLAYER_STATUS } from './index-7d496661.js';
import { u as uuidv4 } from './uuid-a79b5ba8.js';

const VoiceMessageInputWrapper = _ref => {
  var _config$voiceRecord;
  let {
    channel,
    onCancelClick,
    onSubmitClick
  } = _ref;
  const uuid = useRef(uuidv4()).current;
  const [audioFile, setAudioFile] = useState(null);
  const [voiceInputState, setVoiceInputState] = useState(VoiceMessageInputStatus.READY_TO_RECORD);
  const [isSubmitted, setSubmit] = useState(false);
  const [isDisabled, setDisabled] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const {
    stringSet
  } = useLocalization();
  const {
    config
  } = useSendbirdStateContext();
  const minRecordingTime = (config === null || config === void 0 ? void 0 : (_config$voiceRecord = config.voiceRecord) === null || _config$voiceRecord === void 0 ? void 0 : _config$voiceRecord.minRecordingTime) || VOICE_RECORDER_DEFAULT_MIN;
  const {
    start,
    stop,
    cancel,
    recordingTime,
    recordingStatus,
    recordingLimit
  } = useVoiceRecorder({
    onRecordingStarted: () => {
      setVoiceInputState(VoiceMessageInputStatus.RECORDING);
    },
    onRecordingEnded: audioFile => {
      setAudioFile(audioFile);
    }
  });
  const voicePlayer = useVoicePlayer({
    channelUrl: channel === null || channel === void 0 ? void 0 : channel.url,
    key: uuid,
    audioFile: audioFile
  });
  const {
    play,
    pause,
    playbackTime,
    playingStatus
  } = voicePlayer;
  const stopVoicePlayer = voicePlayer.stop;

  // disabled state: muted & frozen
  useEffect(() => {
    if (isDisabledBecauseFrozen(channel) || isDisabledBecauseMuted(channel)) {
      setDisabled(true);
    } else {
      setDisabled(false);
    }
  }, [channel === null || channel === void 0 ? void 0 : channel.myRole, channel === null || channel === void 0 ? void 0 : channel.isFrozen, channel === null || channel === void 0 ? void 0 : channel.myMutedState]);

  // call onSubmitClick when submit button is clicked and recorded audio file is created
  useEffect(() => {
    if (isSubmitted && audioFile) {
      onSubmitClick(audioFile, recordingTime);
      setSubmit(false);
      setAudioFile(null);
    }
  }, [isSubmitted, audioFile, recordingTime]);
  // operate which control button should be displayed
  useEffect(() => {
    if (audioFile) {
      if (recordingTime < minRecordingTime) {
        setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
        setAudioFile(null);
      } else if (playingStatus === VOICE_PLAYER_STATUS.PLAYING) {
        setVoiceInputState(VoiceMessageInputStatus.PLAYING);
      } else {
        setVoiceInputState(VoiceMessageInputStatus.READY_TO_PLAY);
      }
    }
  }, [audioFile, recordingTime, playingStatus]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input-wrapper"
  }, /*#__PURE__*/React__default.createElement(VoiceMessageInput, {
    currentValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? playbackTime : recordingTime,
    maximumValue: recordingStatus === VoiceRecorderStatus.COMPLETED ? recordingTime : recordingLimit,
    currentType: voiceInputState,
    onCancelClick: () => {
      onCancelClick();
      cancel();
      stopVoicePlayer();
    },
    onSubmitClick: () => {
      if (isDisabled) {
        setShowModal(true);
        setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
      } else {
        stop();
        pause();
        setSubmit(true);
      }
    },
    onControlClick: type => {
      switch (type) {
        case VoiceMessageInputStatus.READY_TO_RECORD:
          {
            stopVoicePlayer();
            start();
            break;
          }
        case VoiceMessageInputStatus.RECORDING:
          {
            if (recordingTime >= minRecordingTime && !isDisabled) {
              stop();
            } else if (isDisabled) {
              cancel();
              setShowModal(true);
              setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
            } else {
              cancel();
              setVoiceInputState(VoiceMessageInputStatus.READY_TO_RECORD);
            }
            break;
          }
        case VoiceMessageInputStatus.READY_TO_PLAY:
          {
            play();
            break;
          }
        case VoiceMessageInputStatus.PLAYING:
          {
            pause();
            break;
          }
      }
    }
  }), showModal && /*#__PURE__*/React__default.createElement(Modal, {
    className: "sendbird-voice-message-input-wrapper-alert",
    titleText: isDisabledBecauseMuted(channel) ? stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_MUTED : stringSet.MODAL__VOICE_MESSAGE_INPUT_DISABLED__TITLE_FROZEN,
    hideFooter: true,
    isCloseOnClickOutside: true,
    onCancel: () => {
      setShowModal(false);
      onCancelClick();
    }
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input-wrapper-alert__body"
  }, /*#__PURE__*/React__default.createElement(Button, {
    className: "sendbird-voice-message-input-wrapper-alert__body__ok-button",
    type: ButtonTypes.PRIMARY,
    size: ButtonSizes.BIG,
    onClick: () => {
      setShowModal(false);
      onCancelClick();
    }
  }, stringSet.BUTTON__OK))));
};

export { VoiceMessageInputWrapper as V };
//# sourceMappingURL=VoiceMessageInputWrapper-4138830b.js.map
