import React from "react";
import { styled } from "@material-ui/core/styles";
import ProgressBar from "../ProgressBar";
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
var ProgressContainer = styled("div")({
  width: "100%",
  height: "100%"
});
var TotalPercentageWrapper = styled("div")({
  flexDirection: "row",
  width: "100%",
  display: "flex",
  justifyContent: "space-between"
});

var Progress = function Progress(_ref) {
  var unitProgress = _ref.unitProgress,
      overallProgress = _ref.overallProgress,
      completedVideoTitles = _ref.completedVideoTitles;
  return /*#__PURE__*/React.createElement(ProgressContainer, null, /*#__PURE__*/React.createElement(ProgressBar, {
    progress: overallProgress
  }), /*#__PURE__*/React.createElement(ProgressBar, {
    progress: unitProgress.progress
  }), /*#__PURE__*/React.createElement("h3", null, "Downloading: ", unitProgress.title), /*#__PURE__*/React.createElement(ExpansionPanel, null, /*#__PURE__*/React.createElement(ExpansionPanelSummary, {
    expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, null)
  }, /*#__PURE__*/React.createElement(TotalPercentageWrapper, null, /*#__PURE__*/React.createElement("h3", null, "Downloaded Video Titles"))), /*#__PURE__*/React.createElement(ExpansionPanelDetails, null, /*#__PURE__*/React.createElement("ul", null, completedVideoTitles && completedVideoTitles.length > 0 ? completedVideoTitles : null))));
};

export default Progress;