"use strict";

exports.__esModule = true;
exports.default = BaseItem;

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"));

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

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 = 'SCBaseItem';
const classes = {
  root: `${PREFIX}-root`,
  content: `${PREFIX}-content`,
  image: `${PREFIX}-image`,
  text: `${PREFIX}-text`,
  primary: `${PREFIX}-primary`,
  secondary: `${PREFIX}-secondary`,
  actions: `${PREFIX}-actions`
};
const Root = (0, _styles.styled)(_Widget.default, {
  name: PREFIX,
  slot: 'Root',
  overridesResolver: (props, styles) => styles.root
})(({
  theme
}) => ({
  [`&.${classes.root}`]: {
    width: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    '&.MuiPaper-elevation': {
      paddingTop: theme.spacing(),
      paddingBottom: theme.spacing(),
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
      '&.MuiPaper-elevation0': {
        paddingTop: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        paddingRight: 0,
        [`& .${classes.actions}`]: {
          right: 0
        }
      }
    }
  },
  [`& .${classes.content}`]: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    width: '100%'
  },
  [`& .${classes.image}`]: {
    flexShrink: 0,
    marginRight: theme.spacing(2)
  },
  [`& .${classes.text}`]: {
    flex: '1 1 auto',
    marginTop: theme.spacing(),
    marginBottom: theme.spacing(),
    textAlign: 'left',
    width: '100%'
  },
  [`& .${classes.primary}`]: {
    color: theme.palette.text.primary
  },
  [`& .${classes.secondary}`]: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    color: theme.palette.text.secondary
  }
}));

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

 #### Import

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

 #### Component Name

 The name `BaseItem` 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.|
 |content|.SCBaseItem-content|Styles applied to the content element.|
 |image|.SCBaseItem-image|Styles applied to image section.|
 |text|.SCBaseItem-text|Styles applied to text 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.|

 * @param inProps
 */
function BaseItem(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
  } = props,
        rest = _objectWithoutPropertiesLoose(props, _excluded); // RENDER


  return /*#__PURE__*/_react.default.createElement(Root, _extends({
    id: id
  }, rest, {
    className: (0, _classnames.default)(classes.root, className)
  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.content
  }, image && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.image
  }, image), /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.text
  }, primary && (disableTypography ? primary : /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
    className: classes.primary
  }, primaryTypographyProps), primary)), secondary && (disableTypography ? secondary : /*#__PURE__*/_react.default.createElement(_material.Typography, _extends({
    className: classes.secondary
  }, secondaryTypographyProps), secondary)))), actions && /*#__PURE__*/_react.default.createElement(_material.Box, {
    className: classes.actions
  }, actions));
}