import _regeneratorRuntime from "@babel/runtime/regenerator";
import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback, useState } from "react";
import { styled } from "@material-ui/core/styles";
import * as colors from "@material-ui/core/colors";
import Box from "@material-ui/core/Box";
import { useDropzone } from "react-dropzone";
var Container = styled(Box)({
  width: 400,
  height: 200,
  padding: 20,
  border: "2px dotted ".concat(colors.grey[400]),
  textAlign: "center",
  fontSize: 24
});
var FileCounter = styled(Box)({
  fontSize: 24,
  color: colors.grey[700],
  fontWeight: "bold"
});
/*
  This component allows you to upload multiple files, then reads the files in
  serial. It's perfect for an uploading process where you don't want to upload one
  file at a time. It gives a progress bar indicating upload progres.
*/

export var MultiFileDrop = function MultiFileDrop(_ref) {
  var loadFile = _ref.loadFile,
      onComplete = _ref.onComplete;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      totalUploaded = _useState2[0],
      setTotalUploaded = _useState2[1];

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      errors = _useState4[0],
      setErrors = _useState4[1];

  var _useState5 = useState({
    filesSelected: false
  }),
      _useState6 = _slicedToArray(_useState5, 2),
      _useState6$ = _useState6[0],
      totalFiles = _useState6$.totalFiles,
      filesSelected = _useState6$.filesSelected,
      setUploadStartState = _useState6[1];

  var onDrop = useCallback( /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(acceptedFiles) {
      var errors, _iterator, _step, _step$value, index, file;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setUploadStartState({
                totalFiles: acceptedFiles.length,
                filesSelected: true
              });
              errors = [];
              _iterator = _createForOfIteratorHelper(acceptedFiles.entries());
              _context.prev = 3;

              _iterator.s();

            case 5:
              if ((_step = _iterator.n()).done) {
                _context.next = 12;
                break;
              }

              _step$value = _slicedToArray(_step.value, 2), index = _step$value[0], file = _step$value[1];
              _context.next = 9;
              return loadFile(file).catch(function (err) {
                errors.push(err.toString());
                setErrors(errors);
              });

            case 9:
              setTotalUploaded(index + 1);

            case 10:
              _context.next = 5;
              break;

            case 12:
              _context.next = 17;
              break;

            case 14:
              _context.prev = 14;
              _context.t0 = _context["catch"](3);

              _iterator.e(_context.t0);

            case 17:
              _context.prev = 17;

              _iterator.f();

              return _context.finish(17);

            case 20:
              onComplete(); // eslint-disable-next-line

            case 21:
            case "end":
              return _context.stop();
          }
        }
      }, _callee, null, [[3, 14, 17, 20]]);
    }));

    return function (_x) {
      return _ref2.apply(this, arguments);
    };
  }(), []);

  var _useDropzone = useDropzone({
    onDrop: onDrop
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps,
      isDragActive = _useDropzone.isDragActive;

  if (!filesSelected) {
    return /*#__PURE__*/React.createElement(Container, getRootProps(), /*#__PURE__*/React.createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/React.createElement("p", null, "Drop the files here ...") : /*#__PURE__*/React.createElement("p", null, "Drag 'n' drop some files here, or click to select files"));
  }

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(FileCounter, null, totalUploaded, " / ", totalFiles, " Files Processed"), /*#__PURE__*/React.createElement(Box, {
    maxHeight: 100,
    overflowY: "auto",
    textAlign: "left",
    color: "red",
    fontSize: 12
  }, errors.map(function (err, i) {
    return /*#__PURE__*/React.createElement("div", {
      key: i
    }, err);
  })));
};
export default MultiFileDrop;