import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import { styled } from "@material-ui/core/styles";
import useEventCallback from "use-event-callback";
import { useDropzone } from "react-dropzone";
import * as colors from "@material-ui/core/colors";
var TextArea = styled("textarea")({
  width: "100%",
  minHeight: 300
});
var UploadHover = styled("div")({
  fontSize: 24,
  color: colors.grey[600],
  textAlign: "center",
  padding: 48
});

var emptyFunc = function emptyFunc() {
  return null;
};

export default (function (_ref) {
  var content = _ref.content,
      onChangeContent = _ref.onChangeContent,
      placeholder = _ref.placeholder;
  var onDrop = useEventCallback(function (acceptedFiles) {
    var reader = new FileReader();

    reader.onload = function (e) {
      var fileContent = e.target.result;
      onChangeContent(fileContent);
    };

    reader.readAsText(acceptedFiles[0]);
  });

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      lastClickTime = _useState2[0],
      changeLastClickTime = _useState2[1];

  var onClick = useEventCallback(function (e) {
    if (Date.now() - lastClickTime < 400) {
      getRootProps().onClick(e);
    }

    changeLastClickTime(Date.now());
  });

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

  return /*#__PURE__*/React.createElement("div", Object.assign({}, getRootProps(), {
    onClick: emptyFunc
  }), /*#__PURE__*/React.createElement("input", getInputProps()), isDragActive ? /*#__PURE__*/React.createElement(UploadHover, null, "Drop the text or csv file here.") : /*#__PURE__*/React.createElement(TextArea, {
    value: content,
    onChange: function onChange(e, v) {
      return onChangeContent(e.target.value);
    },
    onClick: onClick,
    placeholder: placeholder
  }));
});