"use strict";

exports.__esModule = true;
exports.default = void 0;

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

var _reactRouterDom = require("react-router-dom");

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

var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));

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

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

var _AppsTwoTone = _interopRequireDefault(require("@material-ui/icons/AppsTwoTone"));

var _TG = require("subfirelib/ui/TG");

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

/* eslint react/prop-types: 0 */
const useStyles = (0, _styles.makeStyles)(theme => ({
  root: {
    width: '100%',
    bottom: 0,
    position: 'fixed',
    backgroundColor: theme.palette.secondary.main,
    height: 56,
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },
  content: {
    flex: '0 0 auto'
  },
  home: {},
  artworkWrapper: {
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center'
  },
  button: {},
  fab: {},
  popover: {
    pointerEvents: 'none'
  },
  paper: {
    padding: theme.spacing(1),
    maxWidth: '80vw',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whitespace: 'no-wrap'
  }
}));

function FooterPlayer(props) {
  const {
    components: c,
    currentPlaying: cp,
    queue: q
  } = props;
  const history = (0, _reactRouterDom.useHistory)();
  const classes = useStyles();

  const [anchorEl, setAnchorEl] = _react.default.useState(null);

  const open = Boolean(anchorEl);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
  };

  const goToHome = () => {
    history.push('/');
  };

  const goToPlayer = () => {
    history.push('/player');
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)(classes.root, 'footer-player')
  }, c.volumeButtonAbove, /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: (0, _classnames.default)(classes.home, classes.content),
    onClick: goToHome
  }, /*#__PURE__*/_react.default.createElement(_AppsTwoTone.default, null)), /*#__PURE__*/_react.default.createElement("div", {
    "aria-owns": open ? 'mouse-over-popover' : undefined,
    "aria-haspopup": "true",
    onMouseEnter: handlePopoverOpen,
    onMouseLeave: handlePopoverClose,
    className: classes.artworkWrapper,
    onClick: goToPlayer
  }, c.artwork(48)), c.playPauseButton, c.nextButton, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement(_Popover.default, {
    id: "mouse-over-popover",
    className: classes.popover,
    classes: {
      paper: classes.paper
    },
    open: open,
    anchorEl: anchorEl,
    anchorOrigin: {
      vertical: 'top',
      horizontal: 'center'
    },
    transformOrigin: {
      vertical: 'bottom',
      horizontal: 'center'
    },
    onClose: handlePopoverClose,
    disableRestoreFocus: true
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb1, {
    component: "span"
  }, (q == null ? void 0 : q.idx) + 1 + '. ' + (cp == null ? void 0 : cp.title))));
}

var _default = FooterPlayer;
exports.default = _default;