"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _buildChildrenObject = require("../common/utils/buildChildrenObject");
var _constants = require("./constants");
var _DropzoneSt = require("./Dropzone.st.css.js");
var _Dropzone2 = _interopRequireDefault(require("./Dropzone.semanticClassNames"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Dropzone/Dropzone.jsx",
  _Dropzone;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** Defines a region in the page where files can be dropped */
var Dropzone = /*#__PURE__*/function (_React$PureComponent) {
  function Dropzone() {
    var _this;
    (0, _classCallCheck2["default"])(this, Dropzone);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _callSuper(this, Dropzone, [].concat(args));
    _this.state = {
      isDragActive: false
    };
    /** https://spin.atomicobject.com/2018/09/13/file-uploader-react-typescript/ */
    _this._dragEventCounter = 0;
    _this._eventHasFiles = function (event) {
      /** DataTransfer object is defined here: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer */
      return event.dataTransfer ? Array.from(event.dataTransfer.items).some(function (item) {
        return item.kind === 'file';
      }) : !!(event.target && event.target.files);
    };
    _this._onDragEnter = function (event) {
      Dropzone._overrideEventDefaults(event);
      _this._dragEventCounter++;

      /** We only want to show the overlay when files are dragged over the dropzone */
      return _this._eventHasFiles(event) && _this.setState({
        isDragActive: true
      });
    };
    _this._onDragLeave = function (event) {
      Dropzone._overrideEventDefaults(event);
      _this._dragEventCounter--;
      return _this._dragEventCounter === 0 && _this.setState({
        isDragActive: false
      });
    };
    _this._onDrop = function (event) {
      Dropzone._overrideEventDefaults(event);
      _this._dragEventCounter = 0;
      if (_this._eventHasFiles(event)) {
        var files = event.dataTransfer ? Array.from(event.dataTransfer.items).map(function (item) {
          return item.getAsFile();
        }) : event.target.files;
        _this.setState({
          isDragActive: false
        });
        return _this.props.onDrop(files);
      }
    };
    return _this;
  }
  (0, _inherits2["default"])(Dropzone, _React$PureComponent);
  return (0, _createClass2["default"])(Dropzone, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        children = _this$props.children,
        dataHook = _this$props.dataHook,
        className = _this$props.className;
      var isDragActive = this.state.isDragActive;
      var childrenObj = (0, _buildChildrenObject.buildChildrenObject)(children, {
        Content: null,
        Overlay: null
      });
      return /*#__PURE__*/_react["default"].createElement("div", {
        "data-hook": dataHook,
        className: (0, _DropzoneSt.st)(_DropzoneSt.classes.root, className, _Dropzone2["default"].container, isDragActive && _Dropzone2["default"].containerDragActive),
        onDrop: this._onDrop,
        onDragEnter: this._onDragEnter,
        onDragLeave: this._onDragLeave,
        onDragOver: Dropzone._overrideEventDefaults,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 89,
          columnNumber: 7
        }
      }, isDragActive && childrenObj.Overlay, childrenObj.Content);
    }
  }]);
}(_react["default"].PureComponent);
_Dropzone = Dropzone;
Dropzone.displayName = 'Dropzone';
/**
* An overlay element to be displayed during a drag over the content
*/
Dropzone.Overlay = function (_ref) {
  var children = _ref.children;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.dropzoneOverlay,
    className: _DropzoneSt.classes.dropzoneOverlay,
    __self: _Dropzone,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17,
      columnNumber: 5
    }
  }, children);
};
/**
 * An content element on which a file can be dragged over
 */
Dropzone.Content = function (_ref2) {
  var children = _ref2.children;
  return /*#__PURE__*/_react["default"].createElement("div", {
    "data-hook": _constants.dataHooks.dropzoneContent,
    __self: _Dropzone,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 29,
      columnNumber: 5
    }
  }, children);
};
Dropzone._overrideEventDefaults = function (event) {
  event.preventDefault();
  event.stopPropagation();
};
Dropzone.Content.displayName = 'Dropzone.Content';
Dropzone.Overlay.displayName = 'Dropzone.Overlay';
var _default = exports["default"] = Dropzone;