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, { useEffect, useState } from 'react';
import { AgentBar, Column, Row, Subtitle, Title } from '@livechat/ui-kit';
import { Badge, makeStyles, Typography } from '@material-ui/core';
import { mdiArrowLeft, mdiClose, mdiDotsVertical } from '@mdi/js';
import Icon from '@mdi/react';
import { IconButton as IconButtonMaterial } from '@tecsinapse/ui-kit/build/Buttons/IconButton';
import { isStringNotBlank } from '@tecsinapse/es-utils/build/object';
import { Warning } from './Warning';
var useStyle = makeStyles(function (_ref) {
  var palette = _ref.palette;
  return {
    headerLabelStyle: {
      color: function color(_ref2) {
        var headerText = _ref2.headerText;
        return headerText || palette.primary.contrastText;
      },
      fontSize: '11px'
    },
    titleStyle: {
      color: function color(_ref3) {
        var headerText = _ref3.headerText;
        return headerText || palette.primary.contrastText;
      },
      fontSize: '19px'
    },
    subtitleStyle: {
      color: function color(_ref4) {
        var headerText = _ref4.headerText;
        return headerText || palette.primary.contrastText;
      },
      fontSize: '13px',
      letterSpacing: '-0.2px'
    }
  };
});
export var ChatHeader = function ChatHeader(_ref5) {
  var minimize = _ref5.minimize,
      _ref5$hasCloseButton = _ref5.hasCloseButton,
      hasCloseButton = _ref5$hasCloseButton === void 0 ? true : _ref5$hasCloseButton,
      title = _ref5.title,
      subtitle = _ref5.subtitle,
      onCloseChat = _ref5.onCloseChat,
      theme = _ref5.theme,
      onBackward = _ref5.onBackward,
      notificationNumber = _ref5.notificationNumber,
      classes = _ref5.classes,
      chatOptions = _ref5.chatOptions,
      headerLabel = _ref5.headerLabel,
      _ref5$headerText = _ref5.headerText,
      headerText = _ref5$headerText === void 0 ? false : _ref5$headerText,
      isBlocked = _ref5.isBlocked,
      showError = _ref5.showError,
      setShowError = _ref5.setShowError,
      errorMessage = _ref5.errorMessage,
      warningMessage = _ref5.warningMessage;

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

  useEffect(function () {
    setShowWarning(isBlocked || showError && isStringNotBlank(errorMessage) || isStringNotBlank(warningMessage));
  }, [isBlocked, showError, warningMessage, errorMessage]);

  var handleWarning = function handleWarning(state) {
    setShowWarning(state);
    setShowError(state);
  };

  var showChatOptions = chatOptions.show,
      chatOptionsColor = chatOptions.color,
      chatOptionsFunc = chatOptions.handleFunc;
  var headerClasses = useStyle({
    headerText: headerText
  });

  var onCloseChatClicked = function onCloseChatClicked(e) {
    if (onCloseChat) {
      onCloseChat(e);
    }

    minimize(e);
  };

  return React.createElement(React.Fragment, null, React.createElement(AgentBar, null, React.createElement(Row, {
    flexFill: true
  }, onBackward && React.createElement(Column, {
    style: {
      justifyContent: 'center'
    }
  }, React.createElement(IconButtonMaterial, {
    key: "close",
    onClick: onBackward,
    style: {
      marginLeft: theme.spacing(-1)
    }
  }, React.createElement(Badge, {
    badgeContent: notificationNumber,
    color: "error",
    classes: {
      badge: classes.badgeNotification
    }
  }, React.createElement(Icon, {
    path: mdiArrowLeft,
    size: 1.0,
    color: theme.palette.primary.contrastText
  })))), React.createElement(Column, {
    flexFill: true
  }, React.createElement(Title, null, headerLabel && React.createElement(Typography, {
    className: headerClasses.headerLabelStyle
  }, headerLabel), React.createElement(Typography, {
    variant: "h6",
    className: headerClasses.titleStyle,
    noWrap: true
  }, title)), React.createElement(Subtitle, null, React.createElement(Typography, {
    variant: "subtitle2",
    className: headerClasses.subtitleStyle,
    noWrap: true
  }, subtitle))), React.createElement(Column, {
    style: {
      justifyContent: 'center'
    }
  }, showChatOptions && React.createElement(IconButtonMaterial, {
    key: "close",
    onClick: chatOptionsFunc
  }, React.createElement(Icon, {
    path: mdiDotsVertical,
    size: 1.0,
    color: chatOptionsColor
  })), hasCloseButton && React.createElement(IconButtonMaterial, {
    key: "close",
    onClick: onCloseChatClicked
  }, React.createElement(Icon, {
    path: mdiClose,
    size: 1.0,
    color: theme.palette.primary.contrastText
  }))))), showWarning && React.createElement(Warning, {
    setWarning: handleWarning,
    message: {
      errorMessage: errorMessage,
      warningMessage: warningMessage
    },
    isBlocked: isBlocked,
    isError: showError
  }));
};
export default ChatHeader;