"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FileUploader = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactDropzone = require("react-dropzone");

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _box = require("../../primitives/box");

var _unstyledButton = require("../../core/behaviors/unstyled-button");

var _text = require("../../core/typography/text");

var _remove = require("../../core/icon/remove");

var _checkmark = require("../../core/icon/checkmark");

var _fileUploader = require("./file-uploader.css-rules");

var _textButtonWithIcon = require("../../core/actions/text-button-with-icon");

var _loadingIndicator = require("../../core/feedback-ui/loading-indicator");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var StyledDropzoneContainer = _styledComponents["default"].div.withConfig({
  displayName: "StyledDropzoneContainer",
  componentId: "j40msy-0"
})(["border-color:", ";border-radius:5px;border-style:dashed;border-width:2px;height:", ";width:100%;display:flex;justify-content:center;"], _fileUploader.getDropzoneBorderColor, _fileUploader.getDropzoneHeight);

var StyledDiv = _styledComponents["default"].div.withConfig({
  displayName: "StyledDiv",
  componentId: "j40msy-1"
})(["border:none;width:100%;"]);

StyledDropzoneContainer.displayName = 'StyledDropzoneContainer';
var RemoveBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "RemoveBox",
  componentId: "j40msy-2"
})(["margin-left:auto;"]);
var FullWidthBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "FullWidthBox",
  componentId: "j40msy-3"
})(["width:100%;"]);
var StyledTextTip = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "StyledTextTip",
  componentId: "j40msy-4"
})(["max-width:240px;text-align:center;"]);
var CenteredText = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "CenteredText",
  componentId: "j40msy-5"
})(["text-align:center;"]);

var removeLabel = function removeLabel(fileName) {
  return "Remove ".concat(fileName);
};

var WithoutFilesDropzoneChild = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "WithoutFilesDropzoneChild",
  componentId: "j40msy-6"
})(["align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;"]);
WithoutFilesDropzoneChild.displayName = 'WithoutFilesDropzoneChild';
var WithFilesDropzoneChild = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "WithFilesDropzoneChild",
  componentId: "j40msy-7"
})(["align-items:center;display:flex;flex-direction:column;height:100%;"]);
WithFilesDropzoneChild.displayName = 'WithFilesDropzoneChild';

var FileUploader = function FileUploader(props) {
  var hasAttachments = props.attachments && props.attachments.length > 0;
  var hasErrors = !!props.attachmentsError;

  var dataCy = props['data-cy'],
      dataQa = props['data-qa'],
      acceptedFileTypes = props.acceptedFileTypes,
      attachments = props.attachments,
      baseHeight = props.baseHeight,
      savePending = props.savePending,
      className = props.className,
      attachmentsError = props.attachmentsError,
      withFilesPrompt = props.withFilesPrompt,
      withoutFilesPrompt = props.withoutFilesPrompt,
      tip = props.tip,
      onClickRemoveHandler = props.onClickRemoveHandler,
      onDropAttachmentHandler = props.onDropAttachmentHandler,
      rest = _objectWithoutProperties(props, ["data-cy", "data-qa", "acceptedFileTypes", "attachments", "baseHeight", "savePending", "className", "attachmentsError", "withFilesPrompt", "withoutFilesPrompt", "tip", "onClickRemoveHandler", "onDropAttachmentHandler"]);

  var _useDropzone = (0, _reactDropzone.useDropzone)({
    onDrop: onDropAttachmentHandler,
    accept: acceptedFileTypes,
    noClick: true
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps,
      isDragActive = _useDropzone.isDragActive,
      open = _useDropzone.open;

  return /*#__PURE__*/_react["default"].createElement(_box.Box, _extends({
    "data-cy": dataCy,
    "data-qa": dataQa
  }, rest), /*#__PURE__*/_react["default"].createElement(StyledDropzoneContainer, _extends({}, getRootProps(), {
    attachments: attachments,
    attachmentsError: attachmentsError,
    baseHeight: baseHeight,
    savePending: savePending,
    isDragActive: isDragActive,
    className: className
  }), /*#__PURE__*/_react["default"].createElement(StyledDiv, {
    style: {
      border: 'none',
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, getInputProps(), {
    label: hasAttachments ? withFilesPrompt : withoutFilesPrompt
  })), !hasAttachments && /*#__PURE__*/_react["default"].createElement(WithoutFilesDropzoneChild, null, /*#__PURE__*/_react["default"].createElement(_textButtonWithIcon.TextButtonWithIcon, {
    onClick: open,
    spacing: "mb2",
    icon: "add",
    position: "left"
  }, withoutFilesPrompt), /*#__PURE__*/_react["default"].createElement(StyledTextTip, {
    spacing: "m0",
    fontSize: "f1"
  }, tip)), hasAttachments && /*#__PURE__*/_react["default"].createElement(WithFilesDropzoneChild, null, /*#__PURE__*/_react["default"].createElement(FullWidthBox, {
    spacing: "mt1"
  }, attachments.map(function (f) {
    return /*#__PURE__*/_react["default"].createElement(_box.Box, {
      stacked: "row",
      align: "center",
      spacing: ['mt1', 'ml2'],
      key: f.name
    }, /*#__PURE__*/_react["default"].createElement(_checkmark.Checkmark, null), /*#__PURE__*/_react["default"].createElement(_text.Text, {
      spacing: ['mv0', 'ml2']
    }, f.name), /*#__PURE__*/_react["default"].createElement(RemoveBox, {
      spacing: "mr2"
    }, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, {
      onClick: function onClick() {
        if (!savePending) onClickRemoveHandler(f);
      },
      "aria-label": removeLabel(f.name)
    }, /*#__PURE__*/_react["default"].createElement(_remove.Remove, null))));
  })), /*#__PURE__*/_react["default"].createElement(_loadingIndicator.LoadingIndicator, {
    ready: !savePending,
    minHeight: "30px",
    spacing: "mv2"
  }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
    stacked: "row",
    justify: "center"
  }, /*#__PURE__*/_react["default"].createElement(_textButtonWithIcon.TextButtonWithIcon, {
    onClick: open,
    icon: "add",
    position: "left"
  }, withFilesPrompt)))))), hasErrors && /*#__PURE__*/_react["default"].createElement(_box.Box, {
    spacing: ['mv1']
  }, /*#__PURE__*/_react["default"].createElement(CenteredText, {
    colorName: "error-fg"
  }, attachmentsError)));
};

exports.FileUploader = FileUploader;
FileUploader.displayName = 'FileUploader';