'use strict';

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

var icons = require('@transferwise/icons');
var React = require('react');
var StatusIcon = require('../../../statusIcon/StatusIcon.js');
require('../../../common/theme.js');
require('../../../common/direction.js');
require('@transferwise/neptune-tokens');
require('../../../common/propsValues/control.js');
var size = require('../../../common/propsValues/size.js');
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');
require('../../../common/propsValues/status.js');
var sentiment = 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('@transferwise/formatting');
require('clsx');
require('react-intl');
require('../../../common/closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var InlinePrompt = require('../../../prompt/InlinePrompt/InlinePrompt.js');

class UploadImageStep extends React.PureComponent {
  uploadInputRef = /*#__PURE__*/React.createRef();
  onManualUpload = () => {
    const {
      fileDropped
    } = this.props;
    const file = this.uploadInputRef.current?.files?.[0];
    if (file != null) {
      fileDropped(file);
    }
  };
  onKeyDown = event => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      this.uploadInputRef.current?.click();
    }
  };
  getImage = () => {
    const {
      usHelpImage,
      usLabel
    } = this.props;
    const {
      errorMessage
    } = this.props;
    if (errorMessage) {
      return /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "d-flex flex-column align-items-center",
        children: /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
          size: size.Size.LARGE,
          sentiment: sentiment.Sentiment.NEGATIVE,
          iconLabel: null
        })
      });
    }
    if (!usHelpImage) {
      return /*#__PURE__*/jsxRuntime.jsx("div", {
        className: "circle circle-sm circle-inverse p-t-1",
        children: /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
          size: 24
        })
      });
    }
    if (typeof usHelpImage === 'string') {
      return /*#__PURE__*/jsxRuntime.jsx("img", {
        src: usHelpImage,
        alt: usLabel,
        className: "thumbnail text-xs-center"
      });
    }
    return usHelpImage;
  };
  render() {
    const {
      errorMessage,
      isComplete,
      errorIconLabel,
      usAccept,
      usButtonText,
      usDisabled,
      usLabel,
      usPlaceholder
    } = this.props;
    return /*#__PURE__*/jsxRuntime.jsx("div", {
      className: "droppable-default-card",
      "aria-hidden": isComplete,
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        className: "droppable-card-content",
        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
          className: "m-b-3",
          children: this.getImage()
        }), usLabel && /*#__PURE__*/jsxRuntime.jsx("h4", {
          className: "np-text-title-body m-b-1",
          children: usLabel
        }), usPlaceholder && /*#__PURE__*/jsxRuntime.jsx("p", {
          className: "np-text-body-large m-b-3",
          children: String(usPlaceholder)
        }), /*#__PURE__*/jsxRuntime.jsxs("label", {
          className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
          role: "button",
          "aria-disabled": usDisabled,
          tabIndex: 0,
          onKeyDown: this.onKeyDown,
          children: [usButtonText ? /*#__PURE__*/jsxRuntime.jsx("span", {
            children: usButtonText
          }) : /*#__PURE__*/jsxRuntime.jsx(icons.Upload, {
            size: 24,
            className: "m-r-0"
          }), /*#__PURE__*/jsxRuntime.jsx("input", {
            ref: this.uploadInputRef,
            type: "file",
            accept: usAccept === '*' ? undefined : usAccept,
            className: "tw-droppable-input hidden",
            disabled: usDisabled,
            name: "file-upload",
            onChange: () => this.onManualUpload()
          })]
        }), errorMessage && /*#__PURE__*/jsxRuntime.jsx("div", {
          className: "upload-error-message",
          children: /*#__PURE__*/jsxRuntime.jsx("div", {
            className: "m-t-3 has-error",
            children: /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
              sentiment: sentiment.Sentiment.NEGATIVE,
              mediaLabel: errorIconLabel,
              width: "full",
              children: errorMessage
            })
          })
        })]
      })
    });
  }
}

exports.default = UploadImageStep;
//# sourceMappingURL=uploadImageStep.js.map
