import { Bin, CrossCircleFill, CheckCircleFill } from '@transferwise/icons';
import { clsx } from 'clsx';
import { forwardRef, useRef, useImperativeHandle } from 'react';
import { useIntl } from 'react-intl';
import Body from '../../body/Body.mjs';
import '../../common/theme.mjs';
import '../../common/direction.mjs';
import '@transferwise/neptune-tokens';
import '../../common/propsValues/control.mjs';
import { Size } from '../../common/propsValues/size.mjs';
import { Typography } from '../../common/propsValues/typography.mjs';
import '../../common/propsValues/width.mjs';
import '../../common/propsValues/type.mjs';
import '../../common/propsValues/dateMode.mjs';
import '../../common/propsValues/monthFormat.mjs';
import '../../common/propsValues/position.mjs';
import '../../common/propsValues/layouts.mjs';
import { Status } from '../../common/propsValues/status.mjs';
import '../../common/propsValues/sentiment.mjs';
import '../../common/propsValues/profileType.mjs';
import '../../common/propsValues/variant.mjs';
import '../../common/propsValues/scroll.mjs';
import '../../common/propsValues/markdownNodeType.mjs';
import '../../common/fileType.mjs';
import '@transferwise/formatting';
import '../../common/closeButton/CloseButton.messages.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import ProcessIndicator from '../../processIndicator/ProcessIndicator.mjs';
import MESSAGES from './UploadItem.messages.mjs';
import { UploadItemLink } from './UploadItemLink.mjs';

var TEST_IDS;
(function (TEST_IDS) {
  TEST_IDS["uploadItem"] = "uploadItem";
  TEST_IDS["mediaBody"] = "mediaBody";
  TEST_IDS["link"] = "link";
  TEST_IDS["action"] = "action";
})(TEST_IDS || (TEST_IDS = {}));
const UploadItem = /*#__PURE__*/forwardRef(({
  file,
  canDelete,
  onDelete,
  onDownload,
  singleFileUpload,
  onFocus: handleFocus
}, ref) => {
  const {
    formatMessage
  } = useIntl();
  const {
    status,
    filename,
    error,
    errors,
    url
  } = file;
  const linkRef = useRef(null);
  const buttonRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: target => {
      if (target === 'button' && buttonRef.current) {
        buttonRef.current.focus();
      } else if (target === 'link' && linkRef.current) {
        linkRef.current.focus();
      } else if (buttonRef.current) {
        buttonRef.current.focus();
      } else if (linkRef.current) {
        linkRef.current.focus();
      }
    },
    id: file.id,
    status: file.status
  }));
  const isSucceeded = [Status.SUCCEEDED, undefined].includes(status) && !!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 === Status.FAILED) {
      return /*#__PURE__*/jsx(CrossCircleFill, {
        size: 24,
        className: "emphasis--negative"
      });
    }
    let processIndicator;
    switch (status) {
      case Status.PROCESSING:
      case Status.PENDING:
        processIndicator = /*#__PURE__*/jsx(ProcessIndicator, {
          size: Size.EXTRA_SMALL,
          status: Status.PROCESSING
        });
        break;
      case Status.SUCCEEDED:
      case Status.DONE:
      default:
        processIndicator = /*#__PURE__*/jsx(CheckCircleFill, {
          size: 24,
          className: "emphasis--positive"
        });
    }
    return processIndicator;
  };
  const getErrorMessage = error => typeof error === 'object' ? error.message : error || formatMessage(MESSAGES.uploadingFailed);
  const getMultipleErrors = errors => {
    if (!errors?.length) {
      return null;
    }
    if (errors?.length === 1) {
      return getErrorMessage(errors[0]);
    }
    return /*#__PURE__*/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__*/jsx("li", {
          children: getErrorMessage(error)
        }, index);
      })
    });
  };
  const getDescription = () => {
    if (error || errors?.length || status === Status.FAILED) {
      return /*#__PURE__*/jsx(Body, {
        type: Typography.BODY_DEFAULT_BOLD,
        className: "np-upload-input__text text-negative",
        children: errors?.length ? getMultipleErrors(errors) : getErrorMessage(error)
      });
    }
    switch (status) {
      case Status.PENDING:
        return /*#__PURE__*/jsx(Body, {
          type: Typography.BODY_DEFAULT,
          className: "np-upload-input__text",
          children: formatMessage(MESSAGES.uploading)
        });
      case Status.PROCESSING:
        return /*#__PURE__*/jsx(Body, {
          className: "np-upload-input__text",
          children: formatMessage(MESSAGES.deleting)
        });
      case Status.SUCCEEDED:
      case Status.DONE:
      default:
        return /*#__PURE__*/jsx(Body, {
          type: Typography.BODY_DEFAULT_BOLD,
          className: "np-upload-input__text",
          children: formatMessage(MESSAGES.uploaded)
        });
    }
  };
  const getTitle = () => {
    return filename || formatMessage(MESSAGES.uploadedFile);
  };
  const onDownloadFile = event => {
    if (onDownload) {
      event.preventDefault();
      onDownload(file);
    }
  };
  return /*#__PURE__*/jsxs("div", {
    className: clsx('np-upload-input__item', {
      'is-interactive': isSucceeded && url
    }),
    "data-testid": `${file.id}-${TEST_IDS.uploadItem}`,
    children: [/*#__PURE__*/jsxs(UploadItemLink, {
      ref: linkRef,
      url: isSucceeded ? url : undefined,
      singleFileUpload: singleFileUpload,
      "data-testid": `${file.id}-${TEST_IDS.link}`,
      onDownload: onDownloadFile,
      children: [/*#__PURE__*/jsx("span", {
        className: "np-upload-input__icon",
        children: getIcon()
      }), /*#__PURE__*/jsxs("div", {
        className: "np-upload-input__item-content",
        "data-testid": `${file.id}-${TEST_IDS.mediaBody}`,
        children: [/*#__PURE__*/jsx(Body, {
          type: Typography.BODY_LARGE,
          className: "np-upload-input__title text-word-break",
          children: getTitle()
        }), getDescription()]
      })]
    }), canDelete && /*#__PURE__*/jsx("div", {
      className: "np-upload-input__item-action",
      children: /*#__PURE__*/jsx("button", {
        ref: buttonRef,
        "aria-label": formatMessage(MESSAGES.removeFile, {
          filename
        }),
        className: "np-upload-input__item-button",
        type: "button",
        tabIndex: 0,
        "data-testid": `${file.id}-${TEST_IDS.action}`,
        onClick: () => onDelete()
        // @ts-expect-error: handleFocus is not a standard FocusEventHandler, but required for parent logic
        ,
        onFocus: handleFocus,
        children: /*#__PURE__*/jsx(Bin, {
          size: 16
        })
      })
    })]
  });
});
UploadItem.displayName = 'UploadItem';

export { TEST_IDS, UploadItem as default };
//# sourceMappingURL=UploadItem.mjs.map
