"use strict";

exports.__esModule = true;
exports.default = Message;

var _react = _interopRequireDefault(require("react"));

var _styles = require("@mui/material/styles");

var _List = _interopRequireDefault(require("@mui/material/List"));

var _material = require("@mui/material");

var _Skeleton = _interopRequireDefault(require("./Skeleton"));

var _reactIntl = require("react-intl");

var _Icon = _interopRequireDefault(require("@mui/material/Icon"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Widget = _interopRequireDefault(require("../Widget"));

const _excluded = ["id", "autoHide", "message", "className", "snippetType", "unseen", "onMouseEnter", "onMouseLeave", "isHovering", "loggedUser", "onDeleteIconClick"];

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

const PREFIX = 'SCMessage';
const classes = {
  root: `${PREFIX}-root`,
  selected: `${PREFIX}-selected`,
  info: `${PREFIX}-info`,
  messageBox: `${PREFIX}-messageBox`,
  messageTime: `${PREFIX}-messageTime`,
  unread: `${PREFIX}-unread`,
  hide: `${PREFIX}-hide`,
  img: `${PREFIX}-img`
};
const Root = (0, _styles.styled)(_Widget.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  maxWidth: 700,
  [`& .${classes.info}`]: {
    display: 'flex',
    justifyContent: 'space-between'
  },
  [`& .${classes.messageBox}`]: {
    margin: 'auto',
    padding: '16px',
    borderRadius: '20px'
  },
  [`& .${classes.messageTime}`]: {
    marginTop: '5px',
    display: 'flex',
    justifyContent: 'flex-end'
  },
  [`& .${classes.unread}`]: {
    width: '0.8rem',
    fill: 'blue'
  },
  [`& .${classes.hide}`]: {
    display: 'none'
  },
  [`& .${classes.img}`]: {
    width: 250,
    height: 200
  }
}));

/**
 *
 > API documentation for the Community-UI Message component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {Message} from '@selfcommunity/ui';
 ```

 #### Component Name

 The name `SCMessage` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCMessage-root|Styles applied to the root element.|
 |card|.SCMessage-card|Styles applied to the card element.|
 |selected|.SCMessage-selected|Styles applied to the selected element.|
 |info|.SCMessage-info|Styles applied to the info section.|
 |messageBox|.SCMessage-messageBox|Styles applied to the message box element.|
 |messageTime|.SCMessage-messageTime|Styles applied to the message time element.|
 |unread|.SCMessage-unread|Styles applied to the unread element.|
 |hide|.SCMessage-hide|Styles applied to the hidden element.|
 |img|.SCMessage-img|Styles applied to the img element.|


 * @param props
 */
function Message(props) {
  // PROPS
  const {
    id = null,
    autoHide = false,
    message = null,
    className = null,
    snippetType = true,
    unseen = null,
    onMouseEnter = null,
    onMouseLeave = null,
    isHovering = null,
    loggedUser = null,
    onDeleteIconClick = null
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // INTL


  const intl = (0, _reactIntl.useIntl)(); // STATE

  const hasFile = message ? message.file : null;

  if (!message) {
    return /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
      elevation: 0
    });
  }
  /**
   * Renders snippet or thread type message object
   */


  const c = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, snippetType ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, null, /*#__PURE__*/_react.default.createElement(_material.ListItemAvatar, null, /*#__PURE__*/_react.default.createElement(_material.Avatar, {
    alt: message.receiver.username,
    src: message.receiver.avatar
  })), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
    primary: /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.info
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      component: "span"
    }, message.receiver.username), /*#__PURE__*/_react.default.createElement(_material.Typography, {
      component: "span"
    }, `${intl.formatDate(message.last_message_at, {
      weekday: 'long',
      day: 'numeric'
    })}`)),
    secondary: /*#__PURE__*/_react.default.createElement(_material.Box, {
      component: "span",
      className: classes.info
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      component: "span"
    }, " ", message.headline), /*#__PURE__*/_react.default.createElement(_Icon.default, {
      fontSize: "small",
      className: unseen ? classes.unread : classes.hide
    }, "fiber_manual_record"))
  }))) : /*#__PURE__*/_react.default.createElement(_material.ListItem, {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    button: true
  }, !snippetType && isHovering && loggedUser === message.sender_id && message.status !== 'hidden' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.IconButton, {
    sx: {
      marginBottom: '25px'
    },
    onClick: onDeleteIconClick
  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
    fontSize: "small"
  }, "delete"))), /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
    primary: /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.messageBox
    }, hasFile ? /*#__PURE__*/_react.default.createElement(_material.Box, {
      className: classes.img
    }, /*#__PURE__*/_react.default.createElement("img", {
      style: {
        height: '100%',
        width: '100%'
      },
      src: message.file.url,
      loading: "lazy",
      alt: 'img'
    })) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
      component: "span"
    }, message.message)),
    secondary: /*#__PURE__*/_react.default.createElement(_material.Box, {
      component: "span",
      className: classes.messageTime
    }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
      component: "span"
    }, `${intl.formatDate(message.created_at, {
      hour: 'numeric',
      minute: 'numeric'
    })}`))
  })));
  /**
   * Renders root object (if not hidden by autoHide prop)
   */


  if (!autoHide) {
    return /*#__PURE__*/_react.default.createElement(Root, _extends({
      className: (0, _classnames.default)(classes.root, className)
    }, rest), /*#__PURE__*/_react.default.createElement(_List.default, null, c));
  }

  return null;
}