function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useRef, useState } from 'react';
import { IconButton, Row, SendButton, TextComposer, TextInput } from '@livechat/ui-kit';
import { Typography } from '@material-ui/core';
import { mdiImage, mdiLibraryVideo, mdiMicrophone, mdiPaperclip, mdiSend } from '@mdi/js';
import Icon from '@mdi/react';
import { defaultGreyLight2 } from '@tecsinapse/ui-kit/build/colors';
import { MicRecorder } from './MicRecorder';
import { CustomUploader } from './CustomUploader';
import { PreviewList } from './PreviewList';
var ENTER_KEYCODE = 13;

var wasEnterPressed = function wasEnterPressed(event) {
  return event.which === ENTER_KEYCODE;
};

var wasOnlyEnterPressed = function wasOnlyEnterPressed(event) {
  return wasEnterPressed(event) && !event.altKey && !event.shiftKey;
};

export var InputComposer = function InputComposer(_ref) {
  var onMessageSend = _ref.onMessageSend,
      onAudio = _ref.onAudio,
      onMediaSend = _ref.onMediaSend,
      maxFileUploadSize = _ref.maxFileUploadSize,
      isBlocked = _ref.isBlocked,
      blockedMessage = _ref.blockedMessage;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      writing = _useState2[0],
      setWriting = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      recording = _useState4[0],
      setRecording = _useState4[1];

  var _useState5 = useState({}),
      _useState6 = _slicedToArray(_useState5, 2),
      files = _useState6[0],
      setFiles = _useState6[1];

  var isThereAudioSupport = onAudio !== undefined;
  var imageUpRef = useRef(null);
  var videoUpRef = useRef(null);
  var appUpRef = useRef(null);

  var _useState7 = useState(null),
      _useState8 = _slicedToArray(_useState7, 2),
      inputRef = _useState8[0],
      setInputRef = _useState8[1];

  var onStopRecording = function onStopRecording(blob, accept) {
    setRecording(false);

    if (accept) {
      onAudio(blob);
    }
  };

  var blockedMessageSpacing = {
    letterSpacing: '-0.1px'
  };
  return React.createElement(React.Fragment, null, React.createElement(PreviewList, {
    files: files,
    setFiles: setFiles
  }), React.createElement(TextComposer, {
    onSend: function onSend(text) {
      if (Object.keys(files).length > 0) {
        onMediaSend(text, files);
      } else {
        onMessageSend(text);
      }

      setFiles({});
      setWriting(false);
    },
    onKeyDown: function onKeyDown(e) {
      if (!writing && wasOnlyEnterPressed(e) && Object.keys(files).length > 0) {
        onMediaSend('', files);
        setFiles({});
      }
    },
    onChange: function onChange(e) {
      return setWriting(e.currentTarget.value !== '');
    },
    inputRef: function inputRef(ref) {
      return setInputRef(ref);
    }
  }, isBlocked ? React.createElement(Row, {
    align: "center",
    justifyContent: "space-around"
  }, React.createElement(Typography, {
    variant: "body2",
    color: "textSecondary",
    style: blockedMessageSpacing
  }, blockedMessage)) : React.createElement(React.Fragment, null, React.createElement(Row, {
    align: "center"
  }, !recording && React.createElement(TextInput, {
    fill: true,
    placeholder: "Digite uma mensagem"
  }), (writing || !isThereAudioSupport) && React.createElement(SendButton, {
    fill: true
  }), !writing && !recording && Object.keys(files).length > 0 && React.createElement(IconButton, {
    fill: true,
    key: "send",
    onClick: function onClick() {
      onMediaSend('', files);
      setFiles({});
    },
    style: {
      maxHeight: 37,
      maxWidth: 35
    }
  }, React.createElement(Icon, {
    path: mdiSend,
    size: 1.143,
    color: "#427fe1",
    style: {
      maxHeight: 26,
      maxWidth: 24
    }
  })), !writing && isThereAudioSupport && Object.keys(files).length <= 0 && !recording && React.createElement(IconButton, {
    fill: true,
    key: "mic",
    onClick: function onClick() {
      return setRecording(true);
    }
  }, React.createElement(Icon, {
    path: mdiMicrophone,
    size: 1,
    color: defaultGreyLight2
  })), recording && React.createElement(MicRecorder, {
    onStopRecording: onStopRecording
  })), !recording && React.createElement(Row, {
    verticalAlign: "center",
    justify: "left"
  }, React.createElement(IconButton, {
    fill: true,
    key: "image",
    onClick: function onClick() {
      return imageUpRef.current.open();
    }
  }, React.createElement(Icon, {
    path: mdiImage,
    size: 0.75,
    color: defaultGreyLight2
  })), React.createElement(IconButton, {
    fill: true,
    key: "movie",
    onClick: function onClick() {
      return videoUpRef.current.open();
    }
  }, React.createElement(Icon, {
    path: mdiLibraryVideo,
    size: 0.75,
    color: defaultGreyLight2
  })), React.createElement(IconButton, {
    fill: true,
    key: "paperclip",
    onClick: function onClick() {
      return appUpRef.current.open();
    }
  }, React.createElement(Icon, {
    path: mdiPaperclip,
    size: 0.75,
    color: defaultGreyLight2
  }))), React.createElement(CustomUploader, {
    focusRef: inputRef,
    ref: imageUpRef,
    files: files,
    setFiles: setFiles,
    mediaType: "image/*",
    maxFileUploadSize: maxFileUploadSize
  }), React.createElement(CustomUploader, {
    focusRef: inputRef,
    ref: videoUpRef,
    files: files,
    setFiles: setFiles,
    mediaType: "video/*",
    maxFileUploadSize: maxFileUploadSize
  }), React.createElement(CustomUploader, {
    focusRef: inputRef,
    ref: appUpRef,
    files: files,
    setFiles: setFiles,
    maxFileUploadSize: maxFileUploadSize
  }))));
};
export default InputComposer;