import React__default, { useState, useMemo, useCallback } from 'react';
import { PlaybackTime } from './ui/PlaybackTime.js';
import { ProgressBar } from './ui/ProgressBar.js';
import TextButton from './ui/TextButton.js';
import Icon, { IconTypes, IconColors } from './ui/Icon.js';
import { b as LabelColors, L as Label, a as LabelTypography } from './index-4105bc4d.js';
import { u as useLocalization } from './LocalizationContext-426f3d58.js';
import { i as VOICE_RECORDER_CLICK_BUFFER_TIME, a as VOICE_RECORDER_DEFAULT_MIN } from './consts-e64103c6.js';

/* eslint-disable no-redeclare */
const VoiceMessageInputStatus = {
  READY_TO_RECORD: 'READY_TO_RECORD',
  RECORDING: 'RECORDING',
  READY_TO_PLAY: 'READY_TO_PLAY',
  PLAYING: 'PLAYING'
};

const ControlerIcon = _ref => {
  let {
    inputState
  } = _ref;
  switch (inputState) {
    case VoiceMessageInputStatus.READY_TO_RECORD:
      {
        return /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-controler-icon record-icon"
        });
      }
    case VoiceMessageInputStatus.RECORDING:
      {
        return /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-controler-icon stop-icon"
        });
      }
    case VoiceMessageInputStatus.READY_TO_PLAY:
      {
        return /*#__PURE__*/React__default.createElement(Icon, {
          className: "sendbird-controler-icon play-icon",
          width: "20px",
          height: "20px",
          type: IconTypes.PLAY,
          fillColor: IconColors.ON_BACKGROUND_1
        });
      }
    case VoiceMessageInputStatus.PLAYING:
      {
        return /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-controler-icon pause-icon"
        }, /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-controler-icon pause-icon-inner"
        }), /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-controler-icon pause-icon-inner"
        }));
      }
    default:
      return null;
  }
};

const VoiceMessageInput = _ref => {
  let {
    minRecordTime = VOICE_RECORDER_DEFAULT_MIN,
    maximumValue,
    currentValue = 0,
    currentType,
    onCancelClick,
    onControlClick,
    onSubmitClick,
    renderCancelButton,
    renderControlButton,
    renderSubmitButton
  } = _ref;
  const [lastClickTime, setLastClickTime] = useState(0);
  const isReadyToRecord = useMemo(() => currentType === VoiceMessageInputStatus.READY_TO_RECORD, [currentType]);
  const isRecording = useMemo(() => currentType === VoiceMessageInputStatus.RECORDING, [currentType]);
  const isSendButtonDisabled = useMemo(() => {
    if (currentType === VoiceMessageInputStatus.READY_TO_RECORD || currentType === VoiceMessageInputStatus.RECORDING) {
      return minRecordTime > currentValue;
    }
    return false;
  }, [currentType, minRecordTime, currentValue]);
  const isPlayMode = useMemo(() => {
    return currentType === VoiceMessageInputStatus.READY_TO_PLAY || currentType === VoiceMessageInputStatus.PLAYING;
  }, [currentType]);
  const {
    stringSet
  } = useLocalization();
  const handleOnCancelClick = () => {
    const currentTime = Date.now();
    if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
      onCancelClick();
      setLastClickTime(currentTime);
    }
  };
  const handleOnControlClick = useCallback(() => {
    const currentTime = Date.now();
    if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
      onControlClick(currentType);
      setLastClickTime(currentTime);
    }
  }, [currentType]);
  const handleOnSubmitClick = () => {
    const currentTime = Date.now();
    if (currentTime - lastClickTime > VOICE_RECORDER_CLICK_BUFFER_TIME) {
      if (!isSendButtonDisabled) {
        onSubmitClick();
      }
      setLastClickTime(currentTime);
    }
  };
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input__indicator"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input__indicator__progress-bar"
  }, /*#__PURE__*/React__default.createElement(ProgressBar, {
    className: "sendbird-voice-message-input__indicator__progress-bar__bar",
    disabled: isReadyToRecord,
    maxSize: maximumValue,
    currentSize: currentValue
  })), isRecording ? /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input__indicator__on-rec"
  }) : null, /*#__PURE__*/React__default.createElement(PlaybackTime, {
    className: "sendbird-voice-message-input__indicator__playback-time",
    time: isPlayMode ? maximumValue - currentValue : currentValue,
    labelColor: isReadyToRecord ? LabelColors.ONBACKGROUND_4 : LabelColors.ONCONTENT_1
  })), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input__controler"
  }, (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || /*#__PURE__*/React__default.createElement(TextButton, {
    className: "sendbird-voice-message-input__controler__cancel",
    onClick: handleOnCancelClick,
    disableUnderline: true
  }, /*#__PURE__*/React__default.createElement(Label, {
    type: LabelTypography.BUTTON_1,
    color: LabelColors.PRIMARY
  }, stringSet.BUTTON__CANCEL)), (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-voice-message-input__controler__main",
    onClick: handleOnControlClick
  }, /*#__PURE__*/React__default.createElement(ControlerIcon, {
    inputState: currentType
  })), (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || /*#__PURE__*/React__default.createElement("div", {
    className: `sendbird-voice-message-input__controler__submit ${isSendButtonDisabled ? 'voice-message--disabled' : ''}`,
    onClick: handleOnSubmitClick
  }, /*#__PURE__*/React__default.createElement(Icon, {
    width: "19px",
    height: "19px",
    type: IconTypes.SEND,
    fillColor: isSendButtonDisabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT
  }))));
};

export { VoiceMessageInputStatus as V, VoiceMessageInput as a };
//# sourceMappingURL=index-8567d9a9.js.map
