'use strict';

var React = require('react');
var ui_PlaybackTime = require('./ui/PlaybackTime.js');
var ui_ProgressBar = require('./ui/ProgressBar.js');
var ui_TextButton = require('./ui/TextButton.js');
var ui_Icon = require('./ui/Icon.js');
var ui_Label = require('./index-73643285.js');
var LocalizationContext = require('./LocalizationContext-af96cf5f.js');
var consts = require('./consts-a5382bc1.js');

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

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

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["default"].createElement("div", {
          className: "sendbird-controler-icon record-icon"
        });
      }
    case VoiceMessageInputStatus.RECORDING:
      {
        return /*#__PURE__*/React__default["default"].createElement("div", {
          className: "sendbird-controler-icon stop-icon"
        });
      }
    case VoiceMessageInputStatus.READY_TO_PLAY:
      {
        return /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
          className: "sendbird-controler-icon play-icon",
          width: "20px",
          height: "20px",
          type: ui_Icon.IconTypes.PLAY,
          fillColor: ui_Icon.IconColors.ON_BACKGROUND_1
        });
      }
    case VoiceMessageInputStatus.PLAYING:
      {
        return /*#__PURE__*/React__default["default"].createElement("div", {
          className: "sendbird-controler-icon pause-icon"
        }, /*#__PURE__*/React__default["default"].createElement("div", {
          className: "sendbird-controler-icon pause-icon-inner"
        }), /*#__PURE__*/React__default["default"].createElement("div", {
          className: "sendbird-controler-icon pause-icon-inner"
        }));
      }
    default:
      return null;
  }
};

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

exports.VoiceMessageInput = VoiceMessageInput;
exports.VoiceMessageInputStatus = VoiceMessageInputStatus;
//# sourceMappingURL=index-c1de8d8f.js.map
