"use strict";

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

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

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

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

var _reactLiveClock = _interopRequireDefault(require("react-live-clock"));

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

var _ListSubheader = _interopRequireDefault(require("@material-ui/core/ListSubheader"));

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

var _Card = _interopRequireDefault(require("@material-ui/core/Card"));

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

var _Eject = _interopRequireDefault(require("@material-ui/icons/Eject"));

var _MoreVert = _interopRequireDefault(require("@material-ui/icons/MoreVert"));

var _FormatListBulleted = _interopRequireDefault(require("@material-ui/icons/FormatListBulleted"));

var _SwipeableDrawer = _interopRequireDefault(require("@material-ui/core/SwipeableDrawer"));

var _CurrentSongList = _interopRequireDefault(require("subfirelib/browsers/songs/CurrentSongList"));

var _hooks = require("subfirelib/hooks");

var _ArrowForward = _interopRequireDefault(require("@material-ui/icons/ArrowForward"));

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

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

/* eslint react/prop-types: 0 */
const useStyles = (0, _styles.makeStyles)(theme => ({
  time: {
    display: 'inline-block',
    paddingRight: 20
  },
  title: {
    textAlign: 'left'
  },
  subtitle: {
    textAlign: 'left'
  },
  contentCard: {
    background: 'transparent',
    display: 'flex',
    justifyContent: 'start'
  },
  cover: {
    maxWidth: '400px',
    maxHeight: '400px',
    width: '100%',
    height: 'auto'
  },
  controls: {
    overflow: 'visible',
    backgroundColor: 'rgba(66,66,66,.7)'
  },
  controls2: {
    overflow: 'visible',
    backgroundColor: 'rgba(66,66,66,.9)'
  },
  caption: {
    position: 'absolute',
    marginTop: '.5em'
  },
  left: {
    marginLeft: '1em'
  },
  right: {
    textAlign: 'right',
    right: '1em'
  },
  contentLayout: {
    display: 'flex',
    left: '0px',
    right: '0px',
    marginLeft: '3%',
    marginRight: '3%',
    flexDirection: 'column'
  },
  controlsLayout: {
    position: 'absolute',
    bottom: '10%',
    width: '94%',
    marginRight: '3%',
    marginLeft: '3%'
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    maxWidth: 400,
    margin: 'auto'
  },
  songList: {
    maxWidth: '40vw'
  }
}));

const ToggleIconButton = props => /*#__PURE__*/_react.default.createElement(_IconButton.default, {
  className: props.buttonClass,
  "aria-label": "Toggle",
  onClick: props.handler
}, /*#__PURE__*/_react.default.createElement(_MoreVert.default, {
  className: props.iconClass
}));

function AutoPlayer(props) {
  var _q$queue$q$idx, _q$queue$q$idx2;

  const {
    components: c,
    currentPlaying: cp,
    queue: q
  } = props;
  const {
    paused
  } = c.state;
  const [playlistOpen, setPlaylistOpen] = (0, _react.useState)(false);

  const handleDrawer = () => setPlaylistOpen(true);

  const handleClose = () => setPlaylistOpen(false);

  const history = (0, _reactRouterDom.useHistory)();
  const classes = useStyles();
  const imageRef = (0, _react.useRef)();
  const {
    setImageTag
  } = (0, _hooks.useImageColorTheme)();
  const currentImageTag = imageRef.current;
  (0, _react.useEffect)(() => {
    if (paused) {
      document.querySelector('.page-bg').classList.add('faded');
    } else {
      document.querySelector('.page-bg').classList.remove('faded');
    }

    return () => {
      const pagebg = document.querySelector('.page-bg');
      if (pagebg) pagebg.classList.remove('faded');
    };
  }, [paused]);

  const imageLoadHandler = evt => {
    if (setImageTag) {
      setImageTag({
        tag: currentImageTag
      });
    }
  };

  const [showingSecondButtons, setShowingSecondButtons] = _react.default.useState(false);

  const goBack = () => history.goBack();
  /*
  <div style={{ width: 128, height: 128 }}>
    <GradientGeneratingImage src={coverArtURL} size={coverSize} />
  </div>
  */


  const subtitle = ((_q$queue$q$idx = q.queue[q.idx]) == null ? void 0 : _q$queue$q$idx.album) + ' - ' + ((_q$queue$q$idx2 = q.queue[q.idx]) == null ? void 0 : _q$queue$q$idx2.artist);

  const contentCard = /*#__PURE__*/_react.default.createElement(_Card.default, {
    className: classes.contentCard,
    elevation: 0
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: 128,
      height: 128
    }
  }, c.artwork(128, imageRef, imageLoadHandler)), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      paddingLeft: 20
    }
  }, /*#__PURE__*/_react.default.createElement(_TG.Th6, {
    className: classes.title
  }, (cp == null ? void 0 : cp.title) || (cp == null ? void 0 : cp.name) || '...loading...'), /*#__PURE__*/_react.default.createElement(_TG.Tst1, {
    className: classes.subtitle
  }, subtitle, ' - ', /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    component: "span"
  }, "(", cp.year, " - ", c.queuePosition, ")"))));

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TG.B, {
    justifyContent: "space-between",
    alignItems: "center",
    style: {
      padding: 20
    }
  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.menuButton,
    color: "inherit",
    onClick: goBack
  }, /*#__PURE__*/_react.default.createElement(_Eject.default, null)), /*#__PURE__*/_react.default.createElement(_TG.Th5, null, " ", q.queueName || 'SubFire Mobile 3'), /*#__PURE__*/_react.default.createElement(_TG.Th5, {
    onClick: () => {
      /* toggle day / night mode */
    },
    color: "inherit",
    className: classes.time
  }, /*#__PURE__*/_react.default.createElement(_reactLiveClock.default, {
    format: "h:mm a",
    ticking: true,
    interval: 10000
  }), c.volumeButtonBelow, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
    className: classes.menuButton,
    color: "inherit",
    onClick: handleDrawer
  }, /*#__PURE__*/_react.default.createElement(_FormatListBulleted.default, null)))), /*#__PURE__*/_react.default.createElement("div", {
    id: "contentCard",
    className: classes.contentLayout
  }, contentCard), /*#__PURE__*/_react.default.createElement("div", {
    id: "controlsCard",
    className: classes.controlsLayout
  }, c.slider, /*#__PURE__*/_react.default.createElement(_Card.default, {
    className: showingSecondButtons ? classes.controls2 : classes.controls
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.left, classes.caption)
  }, c.currentTime), /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, c.duration), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.buttons
  }, showingSecondButtons ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, c.bookmarkButton, c.playQueueButton, c.skipAlbumButton, c.skip30Button, /*#__PURE__*/_react.default.createElement(ToggleIconButton, {
    handler: () => setShowingSecondButtons(false)
  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, c.volumeButtonAbove, c.prevButton, c.playPauseButton, c.nextButton, /*#__PURE__*/_react.default.createElement(ToggleIconButton, {
    handler: () => setShowingSecondButtons(true)
  }))))), /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, {
    open: Boolean(playlistOpen),
    onClose: handleClose,
    onOpen: handleDrawer,
    anchor: "right"
  }, /*#__PURE__*/_react.default.createElement(_ListSubheader.default, {
    component: "div",
    className: classes.listHeader
  }, /*#__PURE__*/_react.default.createElement(_TG.B, {
    flexDirection: "row",
    alignItems: "center"
  }, c.bookmarkButton, c.playQueueButton, c.skipAlbumButton, c.shuffleQueueButton, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: '1 0 auto'
    }
  }), /*#__PURE__*/_react.default.createElement(_Button.default, {
    onClick: handleClose
  }, "Close", /*#__PURE__*/_react.default.createElement(_ArrowForward.default, null)))), /*#__PURE__*/_react.default.createElement(_CurrentSongList.default, {
    className: classes.songList,
    onSongClick: handleClose
  })));
}

var _default = AutoPlayer;
exports.default = _default;