'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');
require('../../common/theme.js');
require('../../common/direction.js');
require('../../common/propsValues/control.js');
require('../../common/propsValues/breakpoint.js');
var size = require('../../common/propsValues/size.js');
var typography = require('../../common/propsValues/typography.js');
require('../../common/propsValues/width.js');
require('../../common/propsValues/type.js');
require('../../common/propsValues/dateMode.js');
require('../../common/propsValues/monthFormat.js');
require('../../common/propsValues/position.js');
require('../../common/propsValues/layouts.js');
var status = require('../../common/propsValues/status.js');
require('../../common/propsValues/sentiment.js');
require('../../common/propsValues/profileType.js');
require('../../common/propsValues/variant.js');
require('../../common/propsValues/scroll.js');
require('../../common/propsValues/markdownNodeType.js');
require('../../common/fileType.js');
require('../../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var ProcessIndicator = require('../../processIndicator/ProcessIndicator.js');
var UploadItem_messages = require('./UploadItem.messages.js');
var UploadItemLink = require('./UploadItemLink.js');

exports.TEST_IDS = void 0;
(function (TEST_IDS) {
  TEST_IDS["uploadItem"] = "uploadItem";
  TEST_IDS["mediaBody"] = "mediaBody";
  TEST_IDS["link"] = "link";
  TEST_IDS["action"] = "action";
})(exports.TEST_IDS || (exports.TEST_IDS = {}));
const UploadItem = /*#__PURE__*/React.forwardRef(({
  file,
  canDelete,
  onDelete,
  onDownload,
  singleFileUpload,
  onFocus: handleFocus
}, ref) => {
  const {
    formatMessage
  } = reactIntl.useIntl();
  const {
    status: status$1,
    filename,
    error,
    errors,
    url
  } = file;
  const linkRef = React.useRef(null);
  const buttonRef = React.useRef(null);
  React.useImperativeHandle(ref, () => ({
    focus: () => {
      if (url) {
        linkRef.current?.focus();
      } else {
        buttonRef.current?.focus();
      }
    },
    id: file.id,
    status: file.status
  }));
  const isSucceeded = [status.Status.SUCCEEDED, undefined].includes(status$1) && !!url;
  /**
   * We're temporarily reverting to the regular icon components,
   * until the StatusIcon receives 24px sizing. Some misalignment
   * to be expected.
   */
  const getIcon = () => {
    if (error || errors?.length || status$1 === status.Status.FAILED) {
      return /*#__PURE__*/jsxRuntime.jsx(icons.CrossCircleFill, {
        size: 24,
        className: "emphasis--negative"
      });
    }
    let processIndicator;
    switch (status$1) {
      case status.Status.PROCESSING:
      case status.Status.PENDING:
        processIndicator = /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator, {
          size: size.Size.EXTRA_SMALL,
          status: status.Status.PROCESSING
        });
        break;
      case status.Status.SUCCEEDED:
      case status.Status.DONE:
      default:
        processIndicator = /*#__PURE__*/jsxRuntime.jsx(icons.CheckCircleFill, {
          size: 24,
          className: "emphasis--positive"
        });
    }
    return processIndicator;
  };
  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(UploadItem_messages.uploadingFailed);
  const getMultipleErrors = errors => {
    if (!errors?.length) {
      return null;
    }
    if (errors?.length === 1) {
      return getErrorMessage(errors[0]);
    }
    return /*#__PURE__*/jsxRuntime.jsx("ul", {
      className: "np-upload-input-errors m-b-0",
      children: errors.map((error, index) => {
        // eslint-disable-next-line react/no-array-index-key
        return /*#__PURE__*/jsxRuntime.jsx("li", {
          children: getErrorMessage(error)
        }, index);
      })
    });
  };
  const getDescription = () => {
    if (error || errors?.length || status$1 === status.Status.FAILED) {
      return /*#__PURE__*/jsxRuntime.jsx(Body, {
        type: typography.Typography.BODY_DEFAULT_BOLD,
        className: "np-upload-input__text text-negative",
        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
      });
    }
    switch (status$1) {
      case status.Status.PENDING:
        return /*#__PURE__*/jsxRuntime.jsx(Body, {
          type: typography.Typography.BODY_DEFAULT,
          className: "np-upload-input__text",
          children: formatMessage(UploadItem_messages.uploading)
        });
      case status.Status.PROCESSING:
        return /*#__PURE__*/jsxRuntime.jsx(Body, {
          className: "np-upload-input__text",
          children: formatMessage(UploadItem_messages.deleting)
        });
      case status.Status.SUCCEEDED:
      case status.Status.DONE:
      default:
        return /*#__PURE__*/jsxRuntime.jsx(Body, {
          type: typography.Typography.BODY_DEFAULT_BOLD,
          className: "np-upload-input__text",
          children: formatMessage(UploadItem_messages.uploaded)
        });
    }
  };
  const getTitle = () => {
    return filename || formatMessage(UploadItem_messages.uploadedFile);
  };
  const onDownloadFile = event => {
    if (onDownload) {
      event.preventDefault();
      onDownload(file);
    }
  };
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
    className: clsx.clsx('np-upload-input__item', {
      'is-interactive': isSucceeded && url
    }),
    "data-testid": `${file.id}-${exports.TEST_IDS.uploadItem}`,
    children: [/*#__PURE__*/jsxRuntime.jsxs(UploadItemLink.UploadItemLink, {
      ref: linkRef,
      url: isSucceeded ? url : undefined,
      singleFileUpload: singleFileUpload,
      "data-testid": `${file.id}-${exports.TEST_IDS.link}`,
      onDownload: onDownloadFile,
      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
        className: "np-upload-input__icon",
        children: getIcon()
      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "np-upload-input__item-content",
        "data-testid": `${file.id}-${exports.TEST_IDS.mediaBody}`,
        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
          type: typography.Typography.BODY_LARGE,
          className: "np-upload-input__title text-word-break",
          children: getTitle()
        }), getDescription()]
      })]
    }), canDelete && /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "np-upload-input__item-action",
      children: /*#__PURE__*/jsxRuntime.jsx("button", {
        ref: buttonRef,
        "aria-label": formatMessage(UploadItem_messages.removeFile, {
          filename
        }),
        className: "np-upload-input__item-button",
        type: "button",
        tabIndex: 0,
        "data-testid": `${file.id}-${exports.TEST_IDS.action}`,
        onClick: () => onDelete(),
        onFocus: handleFocus,
        children: /*#__PURE__*/jsxRuntime.jsx(icons.Bin, {
          size: 16
        })
      })
    })]
  });
});
UploadItem.displayName = 'UploadItem';

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