"use strict";

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

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

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

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

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

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 => ({
  paper: {
    backgroundColor: theme.palette.secondary.main,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  paperDark: {
    backgroundColor: theme.palette.secondary.dark,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  grid: {
    backgroundColor: theme.palette.secondary.main,
    transition: 'background 2s ease-in-out',
    color: theme.palette.secondary.contrastText,
    paddingTop: 5,
    paddingBottom: 5
  },
  pad: {
    paddingLeft: 5,
    paddingRight: 5
  },
  button: {
    color: theme.palette.secondary.contrastText
  },
  sliderwrap: {
    paddingLeft: 5,
    paddingRight: 5
  },
  slider: {
    width: 200,
    color: theme.palette.primary.main
  }
}));

function FullPagePlayer(props) {
  const {
    components,
    currentPlaying
  } = props;
  const {
    state
  } = components;
  const classes = useStyles();
  const c = components;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Paper.default, {
    className: state.paused || !(currentPlaying != null && currentPlaying.id) ? classes.paperDark : classes.paper
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    className: classes.grid,
    spacing: 0,
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 12
  }, /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, 'woah this worked...')), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true
  }, c.back10Button), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    className: classes.pad
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "span",
    variant: "caption"
  }, c.currentTime)), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    className: classes.sliderwrap
  }, c.slider), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    className: classes.pad
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    component: "span",
    variant: "caption"
  }, c.duration)), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true
  }, c.skip30Button)), /*#__PURE__*/_react.default.createElement("br", null), c.prevButton, c.playPauseButton, c.nextButton), /*#__PURE__*/_react.default.createElement(_Paper.default, null, c.artwork(128), /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, currentPlaying.title), /*#__PURE__*/_react.default.createElement(_TG.Tb2, null, c.queuePosition)));
}

var _default = FullPagePlayer;
exports.default = _default;