"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.EntryListItem = exports.EntryListItemBase = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _ListItemAvatar = _interopRequireDefault(require("@material-ui/core/ListItemAvatar"));

var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _ListItemSecondaryAction = _interopRequireDefault(require("@material-ui/core/ListItemSecondaryAction"));

var _styles = require("@material-ui/core/styles");

var _TipButton = require("subfirelib/ui/TipButton");

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

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

/* todo: change this to useStyles */
const styles = theme => ({
  listRoot: {
    width: '100%',
    overflow: 'auto',
    display: 'inline-block'
  },
  subheader: {
    backgroundColor: theme.palette.background.paper
  },
  li: {
    listStyle: 'none'
  },
  listSection: {
    backgroundColor: 'inherit'
  },
  ul: {
    backgroundColor: 'inherit',
    padding: 0
  },
  avatar: {
    margin: 5
  },
  bigAvatar: {
    width: 40,
    height: 40
  }
});

const EntryListItemBase = props => {
  const {
    subsonic,
    classes,
    item,
    index,
    useAvatar,
    onEntryClick,
    onEntrySecondaryClick,
    secondaryActionLabel,
    SecondaryIcon
  } = props;
  const avatar = useAvatar ? /*#__PURE__*/_react.default.createElement(_Avatar.default, {
    alt: "".concat(item.name),
    src: subsonic.getCoverArtURL(item.coverArt, 40),
    className: (0, _classnames.default)(classes.avatar, classes.bigAvatar)
  }) : /*#__PURE__*/_react.default.createElement("img", {
    alt: "".concat(item.name),
    src: subsonic.getCoverArtURL(item.coverArt, 40),
    className: (0, _classnames.default)(classes.avatar, classes.bigAvatar)
  });
  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
    classes: {
      container: classes.li
    },
    key: "item-".concat(index.name || index.title, "-").concat(item.id),
    button: true,
    onClick: () => onEntryClick(item.id)
  }, /*#__PURE__*/_react.default.createElement(_ListItemAvatar.default, null, avatar), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
    primary: "".concat(item.name || item.title),
    className: classes.listItemText
  }), SecondaryIcon && /*#__PURE__*/_react.default.createElement(_ListItemSecondaryAction.default, null, /*#__PURE__*/_react.default.createElement(_TipButton.TipIconButton, {
    title: secondaryActionLabel,
    placement: "left-end",
    "aria-label": secondaryActionLabel,
    onClick: () => onEntrySecondaryClick(item.id)
  }, /*#__PURE__*/_react.default.createElement(SecondaryIcon, null))));
};

exports.EntryListItemBase = EntryListItemBase;
EntryListItemBase.propTypes = {
  useAvatar: _propTypes.default.bool,
  subsonic: _propTypes.default.object,
  classes: _propTypes.default.object,
  item: _propTypes.default.object,
  index: _propTypes.default.object,
  onEntryClick: _propTypes.default.func,
  onEntrySecondaryClick: _propTypes.default.func,
  secondaryActionLabel: _propTypes.default.string,
  SecondaryIcon: _propTypes.default.any
};
const EntryListItem = (0, _styles.withStyles)(styles)(EntryListItemBase);
exports.EntryListItem = EntryListItem;
var _default = EntryListItem;
exports.default = _default;