"use strict";

exports.__esModule = true;
exports.default = RatingPlaylistDialog;

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

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

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));

var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));

var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));

var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _Table = _interopRequireDefault(require("@material-ui/core/Table"));

var _TableBody = _interopRequireDefault(require("@material-ui/core/TableBody"));

var _TableCell = _interopRequireDefault(require("@material-ui/core/TableCell"));

var _TableContainer = _interopRequireDefault(require("@material-ui/core/TableContainer"));

var _TableHead = _interopRequireDefault(require("@material-ui/core/TableHead"));

var _TableRow = _interopRequireDefault(require("@material-ui/core/TableRow"));

var _TablePagination = _interopRequireDefault(require("@material-ui/core/TablePagination"));

var _Rating = _interopRequireDefault(require("@material-ui/lab/Rating"));

var _Stars = _interopRequireDefault(require("@material-ui/icons/Stars"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

const styles = theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(2)
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  }
});

const DialogTitle = (0, _styles.withStyles)(styles)(props => {
  const {
    children,
    classes,
    onClose,
    ...other
  } = props;
  return /*#__PURE__*/_react.default.createElement(_DialogTitle.default, _extends({
    disableTypography: true,
    className: classes.root
  }, other), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6"
  }, children), onClose ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    "aria-label": "close",
    className: classes.closeButton,
    onClick: onClose
  }, /*#__PURE__*/_react.default.createElement(_Close.default, null)) : null);
});
const DialogContent = (0, _styles.withStyles)(theme => ({
  root: {
    padding: theme.spacing(2)
  }
}))(_DialogContent.default);
const DialogActions = (0, _styles.withStyles)(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(1)
  }
}))(_DialogActions.default);

const RatingPlaylistRow = props => {
  const onChange = (evt, v) => {
    props.onChange(props.id, v, props.i);
  };

  const onToggle = (evt, v) => {
    props.onToggle(props.id, props.i);
  };

  return /*#__PURE__*/_react.default.createElement(_TableRow.default, {
    key: props.id
  }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "th",
    scope: "row",
    className: "idx"
  }, props.i + 1), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "th",
    scope: "row",
    className: "title"
  }, props.title), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "td",
    scope: "row",
    className: "artist"
  }, props.artist), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "td",
    scope: "row",
    className: "album"
  }, props.album), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    size: "small",
    component: "td",
    scope: "row",
    className: "track"
  }, props.track), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    size: "small",
    component: "td",
    scope: "row",
    className: "year"
  }, props.year), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    size: "small",
    align: "center",
    component: "td",
    scope: "row",
    className: "star"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small",
    color: props.starred ? 'primary' : 'default',
    onClick: onToggle
  }, /*#__PURE__*/_react.default.createElement(_Stars.default, null))), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "td",
    scope: "row",
    className: "rate"
  }, /*#__PURE__*/_react.default.createElement(_Rating.default, {
    name: 'rating-' + props.id,
    value: props.userRating || 0,
    precision: 1,
    onChange: onChange
  })), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    component: "td",
    scope: "row",
    className: "avg"
  }, /*#__PURE__*/_react.default.createElement(_Rating.default, {
    name: 'avg-' + props.id,
    value: props.averageRating || 0,
    readOnly: true
  })));
};

function RatingPlaylistDialog(props) {
  const {
    open,
    setOpen,
    subsonic,
    playlist = [],
    classes = {}
  } = props;
  const [songs, setSongs] = (0, _react.useState)(playlist);

  const [page, setPage] = _react.default.useState(0);

  const [rowsPerPage, setRowsPerPage] = _react.default.useState(12);

  (0, _react.useEffect)(() => {
    (async () => {
      for (let i = 0; i < songs.length; ++i) {
        songs[i] = await subsonic.getSong(songs[i].id);
        songs[i] = songs[i].song;
      }

      setSongs([...songs]);
    })();
  }, []); // eslint-disable-line

  const handleClose = () => {
    setOpen(false);
  };

  const onChange = (id, v, i) => {
    (async () => {
      v = v || 0; // TODO: add these...

      await subsonic._execute('setRating', {
        id,
        rating: v
      });
      const s = await subsonic.getSong(id);
      songs[i] = s.song;
      setSongs([...songs]);
    })();

    songs[i] = { ...songs[i],
      userRating: v,
      averageRating: v - 1
    }; // this would be replaced by a new subsonic fetch

    setSongs([...songs]);
  };

  const onToggle = (id, i) => {
    (async () => {
      if (songs[i].starred) {
        // TODO: add these...
        await subsonic._execute('unstar', {
          id
        });
      } else {
        await subsonic._execute('star', {
          id
        });
      }

      const s = await subsonic.getSong(id);
      songs[i] = s.song;
      setSongs([...songs]);
    })();
  };

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = event => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const emptyRows = rowsPerPage - Math.min(rowsPerPage, songs.length - page * rowsPerPage);
  return /*#__PURE__*/_react.default.createElement(_Dialog.default, {
    fullWidth: true,
    maxWidth: "xl",
    onClose: handleClose,
    open: open
  }, /*#__PURE__*/_react.default.createElement(DialogTitle, {
    id: "customized-dialog-title",
    onClose: handleClose
  }, "Song Ratings"), /*#__PURE__*/_react.default.createElement(_TableContainer.default, {
    component: DialogContent
  }, /*#__PURE__*/_react.default.createElement(_Table.default, {
    className: classes.table,
    size: "small",
    "aria-label": "a dense table"
  }, /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, null, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "idx"
  }, "#"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "title"
  }, "Name"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "artist"
  }, "Artist"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "album"
  }, "Album"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "track"
  }, "Track"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    size: "small",
    className: "year"
  }, "Year"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    size: "small",
    align: "center",
    className: "star"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    size: "small",
    disabled: true
  }, /*#__PURE__*/_react.default.createElement(_Stars.default, null))), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "rate"
  }, "Rating"), /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    className: "avg"
  }, "Average"))), /*#__PURE__*/_react.default.createElement(_TableBody.default, null, songs.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, i) => {
    return /*#__PURE__*/_react.default.createElement(RatingPlaylistRow, _extends({
      key: row.id,
      i: i + page * rowsPerPage,
      onChange: onChange,
      onToggle: onToggle
    }, row));
  }), emptyRows > 0 && /*#__PURE__*/_react.default.createElement(_TableRow.default, {
    style: {
      height: 31 * emptyRows
    }
  }, /*#__PURE__*/_react.default.createElement(_TableCell.default, {
    colSpan: 8
  })))), /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
    style: {
      paddingRight: 30
    },
    rowsPerPageOptions: [4, 8, 12, 16, 20, 24],
    component: "div",
    count: songs.length,
    rowsPerPage: rowsPerPage,
    page: page,
    onChangePage: handleChangePage,
    onChangeRowsPerPage: handleChangeRowsPerPage
  })), /*#__PURE__*/_react.default.createElement(DialogActions, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
    autoFocus: true,
    onClick: handleClose,
    color: "secondary"
  }, "Close")));
}