"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

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

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

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

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

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

var _add = require("../../core/icon/add");

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

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

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

var StyledDropzone = (0, _styledComponents["default"])(_reactDropzone["default"]).withConfig({
  displayName: "StyledDropzone",
  componentId: "sc-17csf20-0"
})(["border:none;width:100%;"]);
var StyledDropzoneContainer = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "StyledDropzoneContainer",
  componentId: "sc-17csf20-1"
})(["border-color:", ";border-radius:5px;border-style:dashed;border-width:2px;height:", ";opacity:", ";width:100%;"], _fileUploader.getDropzoneBorderColor, _fileUploader.getDropzoneHeight, _fileUploader.getDropzoneOpacity);
StyledDropzoneContainer.displayName = 'StyledDropzoneContainer';
var FullSizeAdd = (0, _styledComponents["default"])(_add.Add).withConfig({
  displayName: "FullSizeAdd",
  componentId: "sc-17csf20-2"
})(["height:100%;"]);
var RemoveBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "RemoveBox",
  componentId: "sc-17csf20-3"
})(["cursor:pointer;margin-left:auto;"]);
var IconTextBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "IconTextBox",
  componentId: "sc-17csf20-4"
})(["align-items:center;display:flex;flex-direction:row;justify-content:center;"]);
var FullWidthBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "FullWidthBox",
  componentId: "sc-17csf20-5"
})(["width:100%;"]);
var StyledTextTip = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "StyledTextTip",
  componentId: "sc-17csf20-6"
})(["max-width:240px;text-align:center;"]);
var ClickableText = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "ClickableText",
  componentId: "sc-17csf20-7"
})(["cursor:pointer;"]);
var CenteredText = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "CenteredText",
  componentId: "sc-17csf20-8"
})(["text-align:center;"]);
IconTextBox.displayName = 'IconTextBox';
var WithoutFilesDropzoneChild = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "WithoutFilesDropzoneChild",
  componentId: "sc-17csf20-9"
})(["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: "sc-17csf20-10"
})(["align-items:center;display:flex;flex-direction:column;height:100%;"]);
WithFilesDropzoneChild.displayName = 'WithFilesDropzoneChild';

var _FileUploader = function _FileUploader(props) {
  var dropzoneRef;
  var hasAttachments = props.attachments && props.attachments.length > 0;
  var hasErrors = !!props.attachmentsError;
  return _react["default"].createElement(StyledDropzoneContainer, {
    attachments: props.attachments,
    attachmentsError: props.attachmentsError,
    savePending: props.savePending,
    theme: props.theme,
    stacked: "row"
  }, _react["default"].createElement(StyledDropzone, {
    onDrop: props.onDropAttachmentHandler,
    accept: props.acceptedFileTypes,
    disableClick: true,
    ref: function ref(node) {
      dropzoneRef = node;
    }
  }, !hasAttachments && _react["default"].createElement(WithoutFilesDropzoneChild, null, _react["default"].createElement(IconTextBox, {
    spacing: "mb2"
  }, _react["default"].createElement(FullSizeAdd, null), _react["default"].createElement(ClickableText, {
    colorName: "brand-primary-base",
    spacing: ['mv0', 'mr0', 'ml1'],
    onClick: function onClick() {
      return dropzoneRef && dropzoneRef.open();
    },
    bold: true
  }, props.withoutFilesPrompt)), _react["default"].createElement(StyledTextTip, {
    spacing: "m0",
    fontSize: "f1"
  }, props.tip)), hasAttachments && _react["default"].createElement(WithFilesDropzoneChild, null, _react["default"].createElement(FullWidthBox, {
    spacing: "mt1"
  }, props.attachments.map(function (f) {
    return _react["default"].createElement(_box.Box, {
      stacked: "row",
      align: "center",
      spacing: ['mt1', 'ml2'],
      key: f.name
    }, _react["default"].createElement(_checkmark.Checkmark, null), _react["default"].createElement(_text.Text, {
      spacing: ['mv0', 'ml2']
    }, f.name), _react["default"].createElement(RemoveBox, {
      onClick: function onClick() {
        return !props.savePending && props.onClickRemoveHandler(f);
      },
      spacing: "mr2"
    }, _react["default"].createElement(_remove.Remove, null)));
  })), _react["default"].createElement(IconTextBox, {
    spacing: "mv2"
  }, _react["default"].createElement(FullSizeAdd, null), _react["default"].createElement(ClickableText, {
    colorName: "brand-primary-base",
    spacing: ['mv0', 'ml1'],
    onClick: function onClick() {
      return !props.savePending && dropzoneRef && dropzoneRef.open();
    },
    bold: true
  }, props.withFilesPrompt))), hasErrors && _react["default"].createElement(_box.Box, {
    spacing: ['mv1']
  }, _react["default"].createElement(CenteredText, {
    colorName: "error-fg"
  }, props.attachmentsError))));
};

var FileUploader = (0, _styledComponents.withTheme)(_FileUploader);
exports.FileUploader = FileUploader;
FileUploader.displayName = 'FileUploader';