import { Upload } from '@transferwise/icons';
import { PureComponent, createRef } from 'react';
import StatusIcon from '../../../statusIcon/StatusIcon.mjs';
import '../../../common/theme.mjs';
import '../../../common/direction.mjs';
import '../../../common/propsValues/control.mjs';
import '../../../common/propsValues/breakpoint.mjs';
import { Size } from '../../../common/propsValues/size.mjs';
import '../../../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 '../../../common/propsValues/status.mjs';
import { Sentiment } from '../../../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 'clsx';
import 'react-intl';
import '../../../common/closeButton/CloseButton.messages.mjs';
import { jsx, jsxs } from 'react/jsx-runtime';
import InlineAlert from '../../../inlineAlert/InlineAlert.mjs';

class UploadImageStep extends PureComponent {
  uploadInputRef = /*#__PURE__*/createRef();
  onManualUpload = () => {
    const {
      fileDropped
    } = this.props;
    const file = this.uploadInputRef.current?.files?.[0];
    if (file != null) {
      fileDropped(file);
    }
  };
  getImage = () => {
    const {
      usHelpImage,
      usLabel
    } = this.props;
    const {
      errorMessage
    } = this.props;
    if (errorMessage) {
      return /*#__PURE__*/jsx("div", {
        className: "d-flex flex-column align-items-center",
        children: /*#__PURE__*/jsx(StatusIcon, {
          size: Size.LARGE,
          sentiment: Sentiment.NEGATIVE,
          iconLabel: null
        })
      });
    }
    if (!usHelpImage) {
      return /*#__PURE__*/jsx("div", {
        className: "circle circle-sm circle-inverse p-t-1",
        children: /*#__PURE__*/jsx(Upload, {
          size: 24
        })
      });
    }
    if (typeof usHelpImage === 'string') {
      return /*#__PURE__*/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__*/jsx("div", {
      className: "droppable-default-card",
      "aria-hidden": isComplete,
      children: /*#__PURE__*/jsxs("div", {
        className: "droppable-card-content",
        children: [/*#__PURE__*/jsx("div", {
          className: "m-b-3",
          children: this.getImage()
        }), usLabel && /*#__PURE__*/jsx("h4", {
          className: "np-text-title-body m-b-1",
          children: usLabel
        }), usPlaceholder && /*#__PURE__*/jsx("p", {
          className: "np-text-body-large m-b-3",
          children: String(usPlaceholder)
        }), /*#__PURE__*/jsxs("label", {
          className: `btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`,
          role: "button",
          "aria-disabled": usDisabled,
          tabIndex: 0,
          children: [usButtonText ? /*#__PURE__*/jsx("span", {
            children: usButtonText
          }) : /*#__PURE__*/jsx(Upload, {
            size: 24,
            className: "m-r-0"
          }), /*#__PURE__*/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__*/jsx("div", {
          className: "upload-error-message",
          children: /*#__PURE__*/jsx("div", {
            className: "m-t-3 has-error",
            children: /*#__PURE__*/jsx(InlineAlert, {
              type: Sentiment.NEGATIVE,
              iconLabel: errorIconLabel,
              children: errorMessage
            })
          })
        })]
      })
    });
  }
}

export { UploadImageStep as default };
//# sourceMappingURL=uploadImageStep.mjs.map
