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 { MessageList } from '@livechat/ui-kit';
import { makeStyles, useTheme } from '@material-ui/styles';
import { defaultGrey2, defaultGreyLight5 } from '@tecsinapse/ui-kit/build/colors';
import { ChatHeader } from './ChatHeader';
import { InputComposer } from './InputComposer';
import { ChatLocations } from './ChatLocations';
import MessageView from './MessageView';
import { ChatList } from './ChatList';
var useStyle = makeStyles(function (theme) {
  return {
    root: {
      display: 'flex',
      flexDirection: 'column',
      height: '100%'
    },
    at: {
      color: defaultGreyLight5,
      fontSize: '9px',
      letterSpacing: '-0.1px'
    },
    authorName: {
      color: defaultGrey2
    },
    bubbleTransparent: {
      border: 'unset',
      borderRadius: 'unset',
      backgroundColor: 'rgba(255, 255, 255, 0)',
      boxShadow: 'unset'
    },
    audio: {
      display: 'flex',
      padding: '5px'
    },
    progress: {
      width: '20px !important',
      height: '20px !important',
      color: 'black'
    },
    imageError: {
      opacity: '0.4'
    },
    emptyBubble: {
      width: '75px',
      height: '50px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    thumbnail: {
      maxWidth: '300px',
      maxHeight: '200px',
      border: '1px solid black'
    },
    errorDiv: {
      backgroundColor: theme.palette.error.main,
      color: 'white',
      zIndex: 2,
      padding: '4px',
      boxShadow: '0 1px 1px grey',
      border: "1px solid ".concat(theme.palette.error.main),
      position: 'absolute',
      display: 'flex',
      left: 0,
      right: 0,
      margin: '6px',
      alignItems: 'center',
      borderRadius: '6px 6px 6px 6px'
    },
    errorDivIcon: {
      padding: '6px',
      display: 'flex'
    },
    errorDivText: {
      flexGrow: '2',
      display: 'flex',
      alignItems: 'center'
    },
    imageMessage: {
      maxHeight: '200px'
    },
    messageRootOwn: {
      display: 'flex',
      justifyContent: 'flex-end'
    },
    messageRootError: {
      marginRight: '-8px'
    },
    messageWithoutName: {
      marginTop: '0 !important'
    },
    messageWithoutDate: {
      marginBottom: '0 !important'
    },
    badgeNotification: {
      padding: 0
    },
    contactListRoot: {
      padding: 0
    },
    contactListName: {
      paddingBottom: '5px'
    },
    contactListMessage: {
      justifyContent: 'space-between'
    },
    contactListNotification: {
      height: '20px',
      width: '20px',
      borderRadius: '10px',
      backgroundColor: 'red',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      color: 'white',
      flexShrink: 0
    },
    channelAvatar: {
      width: '40px',
      height: '40px',
      display: 'flex',
      overflow: 'hidden',
      position: 'relative',
      fontSize: '1.25rem',
      alignItems: 'center',
      flexShrink: '0',
      lineHeight: '1',
      userSelect: 'none',
      justifyContent: 'center'
    }
  };
});

var Maximized = function Maximized(_ref) {
  var messages = _ref.messages,
      onMessageSend = _ref.onMessageSend,
      minimize = _ref.minimize,
      messagesEndRef = _ref.messagesEndRef,
      disabled = _ref.disabled,
      onAudio = _ref.onAudio,
      _ref$hasCloseButton = _ref.hasCloseButton,
      hasCloseButton = _ref$hasCloseButton === void 0 ? true : _ref$hasCloseButton,
      title = _ref.title,
      subtitle = _ref.subtitle,
      onCloseChat = _ref.onCloseChat,
      error = _ref.error,
      onMediaSend = _ref.onMediaSend,
      isLoading = _ref.isLoading,
      loadMore = _ref.loadMore,
      maxFileUploadSize = _ref.maxFileUploadSize,
      onMessageResend = _ref.onMessageResend,
      isBlocked = _ref.isBlocked,
      blockedMessage = _ref.blockedMessage,
      chatList = _ref.chatList,
      onBackToChatList = _ref.onBackToChatList,
      location = _ref.location,
      setLocation = _ref.setLocation,
      onSelectedChat = _ref.onSelectedChat,
      notificationNumber = _ref.notificationNumber,
      chatOptions = _ref.chatOptions,
      headerLabel = _ref.headerLabel,
      headerText = _ref.headerText,
      warningMessage = _ref.warningMessage;
  var classes = useStyle();
  var theme = useTheme();

  var _useState = useState(true),
      _useState2 = _slicedToArray(_useState, 2),
      showError = _useState2[0],
      setShowError = _useState2[1];

  var onBackward = location === ChatLocations.MESSAGES && chatList !== undefined && function () {
    setLocation(ChatLocations.CHAT_LIST);
    onBackToChatList();
  };

  var padding = location === ChatLocations.CHAT_LIST && 0;
  return React.createElement("div", {
    className: classes.root
  }, React.createElement(ChatHeader, {
    minimize: minimize,
    hasCloseButton: hasCloseButton,
    title: title,
    subtitle: subtitle,
    onCloseChat: onCloseChat,
    theme: theme,
    onBackward: onBackward,
    notificationNumber: notificationNumber,
    classes: classes,
    chatOptions: chatOptions,
    headerLabel: headerLabel,
    headerText: headerText,
    isBlocked: isBlocked,
    showError: showError,
    setShowError: setShowError,
    errorMessage: error,
    warningMessage: warningMessage
  }), React.createElement(MessageList, {
    active: true,
    onScrollTop: location === ChatLocations.MESSAGES && loadMore,
    style: {
      padding: padding
    }
  }, location === ChatLocations.MESSAGES && React.createElement(MessageView, {
    messages: messages,
    messagesEndRef: messagesEndRef,
    title: title,
    onMessageResend: onMessageResend,
    classes: classes,
    theme: theme,
    isLoading: isLoading
  }), location === ChatLocations.CHAT_LIST && React.createElement(ChatList, {
    chatList: chatList,
    onSelectedChat: onSelectedChat,
    setLocation: setLocation,
    classes: classes,
    isLoading: isLoading
  })), !disabled && location === ChatLocations.MESSAGES && React.createElement(InputComposer, {
    onMessageSend: onMessageSend,
    onAudio: onAudio,
    onMediaSend: onMediaSend,
    maxFileUploadSize: maxFileUploadSize,
    isBlocked: isBlocked,
    blockedMessage: blockedMessage
  }));
};

export default Maximized;