"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FilesUploadArea = FilesUploadArea;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const isFilesAccepted = (acceptedFileTypes, file) => acceptedFileTypes?.some(fileType => file?.name.endsWith(fileType));
/**
 * Counter is used to indicate amount of entities somewhere
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * */
function FilesUploadArea({
  testId,
  className,
  children,
  onDrag,
  acceptedFiles,
  inputProps,
  onIncorrectFileType,
  dragText
}) {
  const [dragActive, setDragActive] = (0, _react.useState)(false);
  const inputRef = (0, _react.useRef)(null);
  const dragContainer = (0, _react.useRef)(null);
  const handleDrop = event => {
    event.preventDefault();
    event.stopPropagation();
    setDragActive(false);
    const droppedFiles = Array.from(event.dataTransfer.files);
    const notAccepted = droppedFiles.filter(file => !isFilesAccepted(acceptedFiles, file));
    const accepted = droppedFiles.filter(file => isFilesAccepted(acceptedFiles, file));
    if (notAccepted.length) {
      onIncorrectFileType?.(notAccepted);
    }
    if (accepted.length) {
      onDrag?.(accepted);
    }
  };
  const handleDragOver = event => {
    event.preventDefault();
    event.stopPropagation();
    setDragActive(true);
  };
  const handleDragLeave = event => {
    event.preventDefault();
    event.stopPropagation();
    if (event.target === dragContainer.current) {
      setDragActive(false);
    }
  };
  const upload = () => {
    inputRef.current?.click();
  };
  const onInputChange = event => {
    event.preventDefault();
    event.stopPropagation();
    if (event.target.files) {
      const droppedFiles = Array.from(event.target.files);
      onDrag?.(droppedFiles);
    }
    // Reset the input value to allow re-uploading the same file without rerendering the input
    // HTML input doesn't trigger change event when the same file is selected
    event.target.value = '';
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    onDragOver: handleDragOver,
    onDragLeave: handleDragLeave,
    ref: dragContainer,
    onDrop: handleDrop,
    className: (0, _classnames.default)('files-upload-area', className, dragActive && 'drag-active'),
    "test-id": testId,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      className: "files-upload-area-input",
      name: "files-upload-area",
      "test-id": "files-upload-area",
      type: "file",
      onChange: onInputChange,
      accept: acceptedFiles?.toString(),
      multiple: true,
      ref: inputRef,
      "aria-hidden": true,
      ...inputProps
    }), typeof children === 'function' ? children({
      upload
    }) : children, dragActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "files-upload-area-overlay",
      "test-id": "files-upload-area-overlay",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        className: "files-upload-area-overlay-text",
        children: dragText
      })
    })]
  });
}