'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var icons = require('@transferwise/icons');
var clsx = require('clsx');
var React = require('react');
var reactIntl = require('react-intl');
var Body = require('../../body/Body.js');
var UploadButton_messages = require('./UploadButton.messages.js');
var defaults = require('./defaults.js');
var getAllowedFileTypes = require('./getAllowedFileTypes.js');
var jsxRuntime = require('react/jsx-runtime');
var typography = require('../../common/propsValues/typography.js');

exports.TEST_IDS = void 0;
(function (TEST_IDS) {
  TEST_IDS["uploadInput"] = "uploadInput";
  TEST_IDS["mediaBody"] = "mediaBody";
})(exports.TEST_IDS || (exports.TEST_IDS = {}));
const onDragOver = event => {
  event.preventDefault();
};
const DEFAULT_FILE_INPUT_ID = 'np-upload-button';
const UploadButton = /*#__PURE__*/React.forwardRef(({
  disabled,
  withEntries,
  multiple,
  description,
  fileTypes = defaults.imageFileTypes,
  sizeLimit = defaults.DEFAULT_SIZE_LIMIT,
  maxFiles,
  onChange,
  id = DEFAULT_FILE_INPUT_ID,
  uploadButtonTitle
}, ref) => {
  const {
    formatMessage
  } = reactIntl.useIntl();
  const inputRef = React.useRef(null);
  React.useImperativeHandle(ref, () => {
    if (!inputRef.current) {
      throw new Error('inputRef.current is null');
    }
    return inputRef.current;
  }, []);
  const [isDropping, setIsDropping] = React.useState(false);
  const dragCounter = React.useRef(0);
  const reset = () => {
    dragCounter.current = 0;
    setIsDropping(false);
  };
  const onDragLeave = event => {
    event.preventDefault();
    dragCounter.current -= 1;
    if (dragCounter.current === 0) {
      setIsDropping(false);
    }
  };
  const onDragEnter = event => {
    event.preventDefault();
    dragCounter.current += 1;
    if (dragCounter.current === 1) {
      setIsDropping(true);
    }
  };
  const onDrop = event => {
    event.preventDefault();
    reset();
    if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
      onChange(event.dataTransfer.files);
    }
  };
  const filesSelected = event => {
    const {
      files
    } = event.target;
    if (files) {
      onChange(files);
      if (inputRef.current) {
        inputRef.current.value = '';
      }
    }
  };
  const getFileTypesDescription = () => {
    if (fileTypes === '*') {
      return fileTypes;
    }
    return getAllowedFileTypes(Array.isArray(fileTypes) ? fileTypes : [fileTypes]).join(', ');
  };
  function getDescription() {
    if (description) {
      return description;
    }
    const fileTypesDescription = getFileTypesDescription();
    const derivedFileDescription = fileTypesDescription === '*' ? formatMessage(UploadButton_messages.allFileTypes) : fileTypesDescription;
    return formatMessage(UploadButton_messages.instructions, {
      fileTypes: derivedFileDescription,
      size: Math.round(sizeLimit / 1000)
    });
  }
  function getAcceptedTypes() {
    const areAllFilesAllowed = getFileTypesDescription() === '*';
    if (areAllFilesAllowed) {
      return {}; // file input by default allows all files
    }
    if (Array.isArray(fileTypes)) {
      return {
        accept: fileTypes.join(',')
      };
    }
    return {
      accept: fileTypes
    };
  }
  function renderDescription() {
    return /*#__PURE__*/jsxRuntime.jsxs(Body, {
      className: "np-upload-input__text",
      children: [getDescription(), maxFiles && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
        children: [/*#__PURE__*/jsxRuntime.jsx("br", {}), `Maximum ${maxFiles} files.`]
      })]
    });
  }
  function renderButtonTitle() {
    if (uploadButtonTitle) {
      return uploadButtonTitle;
    }
    return formatMessage(multiple ? UploadButton_messages.uploadFiles : UploadButton_messages.uploadFile);
  }
  return /*#__PURE__*/jsxRuntime.jsxs("label", {
    className: clsx.clsx('np-upload-input__upload-button', `np-upload-input__upload-button--${disabled ? 'disabled' : 'enabled'}`, `np-upload-input__upload-button--${withEntries ? 'with-entries' : 'without-entries'}`, {
      'is-dropping': isDropping
    }),
    htmlFor: id,
    ...(!disabled && {
      onDragEnter,
      onDragLeave,
      onDrop,
      onDragOver
    }),
    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
      className: "np-upload-input__icon",
      children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
        size: 24,
        className: "text-link"
      })
    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: "np-upload-input__item-content",
      "data-testid": exports.TEST_IDS.mediaBody,
      children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
        type: typography.Typography.BODY_LARGE_BOLD,
        className: "np-upload-input__title",
        children: renderButtonTitle()
      }), renderDescription()]
    }), /*#__PURE__*/jsxRuntime.jsx("input", {
      className: "np-upload-input__upload-button-input sr-only",
      type: "file",
      id: id,
      ...getAcceptedTypes(),
      ...(multiple && {
        multiple: true
      }),
      ref: inputRef,
      disabled: disabled,
      name: "file-upload",
      "data-testid": exports.TEST_IDS.uploadInput,
      onChange: filesSelected
    }), isDropping && /*#__PURE__*/jsxRuntime.jsxs("div", {
      className: clsx.clsx('np-upload-input__drop-file-overlay', 'droppable-card', 'droppable-dropping-card', 'droppable-card-content'),
      children: [/*#__PURE__*/jsxRuntime.jsx(icons.PlusCircle, {
        className: "m-x-1",
        size: 24
      }), /*#__PURE__*/jsxRuntime.jsx("div", {
        children: formatMessage(UploadButton_messages.dropFile)
      })]
    })]
  });
});
UploadButton.displayName = 'UploadButton';

exports.default = UploadButton;
//# sourceMappingURL=UploadButton.js.map
