"use strict";

exports.__esModule = true;
exports.default = NotificationItem;

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

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

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

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

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

var _useThemeProps = _interopRequireDefault(require("@mui/material/styles/useThemeProps"));

var _NewChip = _interopRequireDefault(require("../NewChip/NewChip"));

var _colors = require("@mui/material/colors");

var _notification = require("../../types/notification");

const _excluded = ["id", "className", "image", "disableTypography", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps", "actions", "footer", "template", "isNew", "elevation"];

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 = 'SCNotificationItem';
const classes = {
  root: `${PREFIX}-root`,
  content: `${PREFIX}-content`,
  dense: `${PREFIX}-dense`,
  header: `${PREFIX}-header`,
  image: `${PREFIX}-image`,
  snippetImage: `${PREFIX}-snippet-image`,
  title: `${PREFIX}-title`,
  primary: `${PREFIX}-primary`,
  secondary: `${PREFIX}-secondary`,
  actions: `${PREFIX}-actions`,
  footer: `${PREFIX}-footer`,
  snippet: `${PREFIX}-snippet`,
  newSnippet: `${PREFIX}-new-snippet`,
  newChip: `${PREFIX}-new-chip`
};
const Root = (0, _styles.styled)(_Widget.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  [`&.${classes.root}`]: {
    backgroundColor: 'transparent',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginTop: theme.spacing(),
    boxSizing: 'border-box',
    '&.MuiPaper-elevation': {
      padding: `${theme.spacing()} ${theme.spacing(2)}`
    },
    '&.MuiPaper-elevation0': {
      borderRadius: 0,
      [`& .${classes.actions}`]: {
        right: 0
      }
    }
  },
  [`&.${classes.dense}`]: {
    '& .SCNotificationItem-header': {
      alignItems: 'center'
    },
    marginTop: 0,
    padding: `0px ${theme.spacing()} !important`
  },
  [`&.${classes.snippet}`]: {
    '&:before': {
      borderRadius: '5px',
      width: '4px',
      left: 1,
      height: '100%',
      display: 'block',
      zIndex: '20',
      position: 'absolute',
      content: '" "',
      backgroundColor: `${_colors.grey[200]}`
    },
    '& .SCNotificationItem-header': {
      alignItems: 'flex-start'
    },
    '& .SCNotificationItem-content': {
      padding: `5px ${theme.spacing()}`
    }
  },
  [`&.${classes.newSnippet}`]: {
    '&:before': {
      backgroundColor: theme.palette.primary.main
    }
  },
  [`& .${classes.content}`]: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  [`& .${classes.header}`]: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    width: '100%',
    flex: 1
  },
  [`& .${classes.image}`]: {
    flexShrink: 0,
    marginRight: theme.spacing(1)
  },
  [`& .${classes.snippetImage}`]: {
    paddingLeft: `${theme.spacing()}`,
    '& .MuiAvatar-root': {
      width: 25,
      height: 25
    }
  },
  [`& .${classes.title}`]: {
    flex: '1 1 auto',
    textAlign: 'left',
    width: '100%'
  },
  [`& .${classes.primary}`]: {
    color: theme.palette.text.primary,
    textOverflow: 'ellipsis',
    display: 'inline',
    overflow: 'hidden'
  },
  [`& .${classes.secondary}`]: {
    textOverflow: 'ellipsis',
    display: 'inline',
    overflow: 'hidden',
    color: theme.palette.text.secondary
  },
  [`& .${classes.actions}`]: {
    '> div': {
      justifyContent: 'flex-end'
    },
    flex: 1
  },
  [`& .${classes.footer}`]: {
    padding: `0px ${theme.spacing()}`,
    width: '100%'
  }
}));

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

 #### Import

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

 #### Component Name

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


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCBaseItem-root|Styles applied to the root element.|
 |newSnippet|.SCBaseItem-new-snippet|Styles applied to the root element when notification is marked as new.|
 |content|.SCBaseItem-content|Styles applied to the content element.|
 |header|.SCBaseItem-header|Styles applied to the header element.|
 |image|.SCBaseItem-image|Styles applied to image section.|
 |snippetImage|.SCBaseItem-snippet-image|Styles applied to image section when a snippet notification is rendered.|
 |title|.SCBaseItem-text|Styles applied to title section.|
 |primary|.SCBaseItem-primary|Styles applied to primary section.|
 |secondary|.SCBaseItem-secondary|Styles applied to secondary section.|
 |actions|.SCBaseItem-actions|Styles applied to actions section.|
 |footer|.SCBaseItem-footer|Styles applied to footer section.|
 |newChip|.SCBaseItem-new-chip|Styles applied to the new chip element when notification is marked as new.|

 * @param inProps
 */
function NotificationItem(inProps) {
  // PROPS
  const props = (0, _useThemeProps.default)({
    props: inProps,
    name: PREFIX
  });

  const {
    id = null,
    className = null,
    image = null,
    disableTypography = false,
    primary = null,
    primaryTypographyProps = {
      component: 'span',
      variant: 'body1'
    },
    secondary = null,
    secondaryTypographyProps = {
      component: 'p',
      variant: 'body2'
    },
    actions = null,
    footer = null,
    template = _notification.SCNotificationObjectTemplateType.DETAIL,
    isNew = false,
    elevation = 0
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded);

  const isSnippetTemplate = template === _notification.SCNotificationObjectTemplateType.SNIPPET;
  const isDetailTemplate = template === _notification.SCNotificationObjectTemplateType.DETAIL;
  const isToastTemplate = template === _notification.SCNotificationObjectTemplateType.TOAST; // RENDER

  return /*#__PURE__*/_react.default.createElement(Root, _extends({
    id: id
  }, rest, {
    className: (0, _classnames.default)(classes.root, className, {
      [classes.dense]: isSnippetTemplate || isToastTemplate,
      [classes.snippet]: isSnippetTemplate,
      [classes.newSnippet]: isSnippetTemplate && isNew
    }),
    elevation: elevation
  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.content
  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.header
  }, image && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: (0, _classnames.default)(classes.image, {
      [classes.snippetImage]: isSnippetTemplate
    })
  }, image), /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.title
  }, primary && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.primary
  }, isDetailTemplate && isNew && /*#__PURE__*/_react.default.createElement(_NewChip.default, {
    className: classes.newChip
  }), disableTypography ? primary : /*#__PURE__*/_react.default.createElement(_material.Typography, primaryTypographyProps, primary)), secondary && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.secondary
  }, disableTypography ? secondary : /*#__PURE__*/_react.default.createElement(_material.Typography, secondaryTypographyProps, secondary)))), actions && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.actions
  }, actions)), footer && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.footer
  }, footer));
}