function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

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, { useState } from 'react';
import { MessageText, MessageTitle, MessageMedia, Bubble, Message as LiveChatMessage } from '@livechat/ui-kit';
import { Typography } from '@material-ui/core';
import { isStringNotBlank } from '@tecsinapse/es-utils/build/object';
import { mdiAlertCircleOutline, mdiImageOff } from '@mdi/js';
import clsx from 'clsx';
import Icon from '@mdi/react';
import CircularProgress from '@material-ui/core/CircularProgress';
import Tooltip from '@material-ui/core/Tooltip';
import { IconButton as IconButtonMaterial } from '@tecsinapse/ui-kit/build/Buttons/IconButton';
import { DeliveryStatus } from './DeliveryStatus';
import { ImageLoader } from './ImageLoader';
import { ApplicationLoader } from './ApplicationLoader';
import { VideoLoader } from './VideoLoader';
import { AudioLoader } from './AudioLoader';
export var Message = function Message(_ref) {
  var _clsx, _clsx2;

  var title = _ref.title,
      onMessageResend = _ref.onMessageResend,
      classes = _ref.classes,
      message = _ref.message,
      addMessageName = _ref.addMessageName,
      addMessageDate = _ref.addMessageDate,
      theme = _ref.theme,
      id = _ref.id;

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

  return React.createElement("div", {
    className: clsx((_clsx = {}, _defineProperty(_clsx, classes.messageRootOwn, message.own), _defineProperty(_clsx, classes.messageRootError, message.status === 'error' && message.own), _clsx))
  }, React.createElement(LiveChatMessage, {
    className: clsx((_clsx2 = {}, _defineProperty(_clsx2, classes.messageWithoutName, !addMessageName), _defineProperty(_clsx2, classes.messageWithoutDate, !addMessageDate), _clsx2)),
    date: addMessageName && React.createElement(Typography, {
      variant: "caption",
      className: classes.authorName
    }, message.authorName, !isStringNotBlank(message.authorName) && message.own && 'Você', !isStringNotBlank(message.authorName) && !message.own && title),
    deliveryStatus: React.createElement(DeliveryStatus, {
      message: message,
      classes: classes,
      addMessageDate: addMessageDate,
      showDate: showDate
    }),
    isOwn: message.own,
    key: message.id
  }, React.createElement(Bubble, {
    isOwn: message.own,
    onClick: addMessageDate ? undefined : function () {
      return setShowDate(function (currentShowDate) {
        return !currentShowDate;
      });
    }
  }, message.text && React.createElement(MessageText, null, React.createElement(Typography, {
    variant: "body1"
  }, message.text)), message.title && React.createElement(MessageTitle, {
    title: React.createElement(Typography, {
      variant: "body1"
    }, message.title)
  }), message.medias && message.medias.length > 0 && message.medias.map(function (media) {
    return React.createElement(MessageMedia, {
      key: media.url
    }, (media.mediaType.startsWith('image') || media.mediaType.startsWith('video')) && React.createElement(React.Fragment, null, message.status === 'sending' || message.status === 'error' ? React.createElement("div", {
      className: classes.emptyBubble
    }, message.status === 'sending' && React.createElement(CircularProgress, {
      className: classes.progress
    }), message.status === 'error' && React.createElement(Icon, {
      path: mdiImageOff,
      size: 1,
      color: message.own ? 'white' : 'black',
      className: classes.imageError
    })) : React.createElement(React.Fragment, null, media.mediaType.startsWith('image') && React.createElement(ImageLoader, {
      url: media.url,
      classes: classes
    }), media.mediaType.startsWith('video') && React.createElement(VideoLoader, {
      media: media,
      classes: classes
    }))), media.mediaType.startsWith('audio') && React.createElement(AudioLoader, {
      media: media,
      classes: classes
    }), media.mediaType.startsWith('application') && React.createElement(ApplicationLoader, {
      message: message,
      media: media
    }));
  }))), message.status === 'error' && React.createElement(Tooltip, {
    title: "Reenviar",
    placement: "top"
  }, React.createElement(IconButtonMaterial, {
    fill: true,
    key: "send again",
    onClick: function onClick() {
      onMessageResend(message.localId);
    },
    style: {
      padding: '4px',
      height: '32px',
      alignSelf: 'center',
      top: addMessageName ? undefined : '-10px'
    }
  }, React.createElement(Icon, {
    path: mdiAlertCircleOutline,
    size: 1,
    color: theme.palette.error.main
  }))));
};