"use strict";

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

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

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

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

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

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

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

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

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

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

var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

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

// import { useWindowSize } from 'react-use';
// import Paper from '@material-ui/core/Paper';

/* eslint react/prop-types: 0 */
const useStyles = (0, _styles.makeStyles)(theme => ({
  landscapePlayer: {
    position: 'relative',
    top: 72,
    height: 'calc(100% - 72px)'
  },
  appbar: {
    maxHeight: 72
  },
  flex: {
    flex: 1,
    color: 'inherit'
  },
  grid: {
    flex: '0 1 auto'
  },
  title: {
    color: 'inherit'
  },
  list: {
    position: 'relative',
    overflow: 'auto'
  },
  closeButton: {
    backgroundColor: '#000000'
  },
  songListItem: {
    maxWidth: 352
  },
  selectedSongListItem: {
    maxWidth: 352,
    fontStyle: 'italic',
    marginLeft: 10
  },
  secondaryActionButtonsCentered: {
    width: '100%',
    display: 'flex',
    justifyContent: 'space-evenly',
    background: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText
  },
  listHeader: {
    background: theme.palette.secondary.main,
    color: theme.palette.secondary.contrastText
  },
  actionButtons: {
    // position: 'absolute',
    // width: '80%',
    // left: '10%',
    // bottom: theme.spacing(5),
    display: 'flex',
    justifyContent: 'space-evenly',
    flex: '0 0 auto'
  },
  left: {
    display: 'block'
  },
  right: {
    display: 'block',
    textAlign: 'right'
  },
  songList: {
    maxWidth: '40vw',
    padding: 0
  }
}));

function LandscapePlayer(props) {
  const [playlistOpen, setPlaylistOpen] = (0, _react.useState)(false); // eslint-disable-line
  // const windowSize = useWindowSize();

  const imageRef = (0, _react.useRef)();
  const [divRef] = (0, _hooks.useImageFit)(imageRef);
  const {
    setImageTag
  } = (0, _hooks.useImageColorTheme)();
  const currentImageTag = imageRef.current;
  const {
    components: c,
    currentPlaying: cp,
    queue: q
  } = props;
  const {
    paused
  } = c.state;
  const history = (0, _reactRouterDom.useHistory)();
  const classes = useStyles();

  const goBack = () => history.goBack();

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

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

  (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]);
  /*           <CastSubsonic {...subProps}>
              <ChromecastButton {...subProps} />
            </CastSubsonic>
            <RemoteReceiverToggleButton {...subProps} />
  */
  // const coverSize = (windowSize.width - 32) / 3;

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

  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppBar.default, {
    className: classes.appbar
  }, /*#__PURE__*/_react.default.createElement(_Toolbar.default, null, /*#__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.Th6, {
    className: classes.flex
  }, /*#__PURE__*/_react.default.createElement("span", {
    id: "title-span",
    className: classes.title
  }, q.queueName || 'SubFire Mobile 3')), 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", {
    className: classes.landscapePlayer
  }, /*#__PURE__*/_react.default.createElement(_TG.Gc, {
    style: {
      height: '100%'
    }
  }, /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    xs: 6,
    style: {
      maxHeight: '100%',
      padding: 15
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    ref: divRef,
    style: {
      width: '100%',
      height: '100%',
      backgroundColor: 'transparent',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'start'
    }
  }, c.artwork(0, imageRef, imageLoadHandler, 'image-shadow'))), /*#__PURE__*/_react.default.createElement(_TG.Gci, {
    xs: 6,
    direction: "column",
    justify: "space-between",
    alignItems: "stretch",
    style: {
      padding: 15
    }
  }, /*#__PURE__*/_react.default.createElement(_TG.Gi, null, /*#__PURE__*/_react.default.createElement(_TG.Tb1, null, cp.title), /*#__PURE__*/_react.default.createElement(_TG.B, {
    flexDirection: "row"
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, cp.artist), " ", /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: '1 0 auto'
    }
  }), /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, "(", q.idx + 1, "/ ", q.queue.length, ")")), /*#__PURE__*/_react.default.createElement(_TG.B, {
    flexDirection: "row",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, cp.album), " ", /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: '1 0 auto'
    }
  }), /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, "(", cp.year, ")"))), /*#__PURE__*/_react.default.createElement(_TG.Gi, null, c.slider, /*#__PURE__*/_react.default.createElement(_TG.B, {
    flexDirection: "row",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.left, classes.caption)
  }, c.currentTime), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      flex: '1 0 auto'
    }
  }), /*#__PURE__*/_react.default.createElement(_TG.Tc, {
    className: (0, _classnames.default)(classes.right, classes.caption)
  }, c.duration))), /*#__PURE__*/_react.default.createElement(_TG.Gi, {
    className: classes.actionButtons
  }, c.prevButton, c.back10Button, c.playPauseButton, c.skip30Button, c.nextButton)))), /*#__PURE__*/_react.default.createElement(_SwipeableDrawer.default, {
    open: Boolean(playlistOpen),
    onClose: handleClose,
    onOpen: handleDrawer,
    anchor: "right"
  }, /*#__PURE__*/_react.default.createElement(_CurrentSongList.default, {
    className: classes.songList,
    onSongClick: handleClose
  }, /*#__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)))))));
}

var _default = LandscapePlayer;
exports.default = _default;