"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 = require("react-dropzone");

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

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

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

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 }; }

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); }

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

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

StyledDropzoneContainer.displayName = 'StyledDropzoneContainer';
var FullSizeAdd = (0, _styledComponents["default"])(_add.Add).withConfig({
  displayName: "FullSizeAdd",
  componentId: "j40msy-2"
})(["height:100%;"]);
var RemoveBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "RemoveBox",
  componentId: "j40msy-3"
})(["margin-left:auto;"]);
var IconTextBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "IconTextBox",
  componentId: "j40msy-4"
})(["align-items:center;display:flex;flex-direction:row;justify-content:center;"]);
var FullWidthBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "FullWidthBox",
  componentId: "j40msy-5"
})(["width:100%;"]);
var StyledTextTip = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "StyledTextTip",
  componentId: "j40msy-6"
})(["max-width:240px;text-align:center;"]);
var CenteredText = (0, _styledComponents["default"])(_text.Text).withConfig({
  displayName: "CenteredText",
  componentId: "j40msy-7"
})(["text-align:center;"]);

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

IconTextBox.displayName = 'IconTextBox';
var WithoutFilesDropzoneChild = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "WithoutFilesDropzoneChild",
  componentId: "j40msy-8"
})(["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-9"
})(["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 _useDropzone = (0, _reactDropzone.useDropzone)({
    onDrop: props.onDropAttachmentHandler,
    accept: props.acceptedFileTypes,
    noClick: true
  }),
      getRootProps = _useDropzone.getRootProps,
      getInputProps = _useDropzone.getInputProps,
      isDragActive = _useDropzone.isDragActive,
      open = _useDropzone.open;

  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledDropzoneContainer, _extends({}, getRootProps(), {
    attachments: props.attachments,
    attachmentsError: props.attachmentsError,
    savePending: props.savePending,
    isDragActive: isDragActive,
    theme: props.theme
  }), /*#__PURE__*/_react["default"].createElement(StyledDiv, {
    style: {
      border: 'none',
      width: '100%'
    }
  }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, getInputProps(), {
    label: hasAttachments ? props.withFilesPrompt : props.withoutFilesPrompt
  })), !hasAttachments && /*#__PURE__*/_react["default"].createElement(WithoutFilesDropzoneChild, null, /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, {
    onClick: open
  }, /*#__PURE__*/_react["default"].createElement(IconTextBox, {
    spacing: "mb2"
  }, /*#__PURE__*/_react["default"].createElement(FullSizeAdd, null), /*#__PURE__*/_react["default"].createElement(_text.Text, {
    colorName: "brand-primary-base",
    spacing: ['mv0', 'mr0', 'ml1'],
    bold: true
  }, props.withoutFilesPrompt))), /*#__PURE__*/_react["default"].createElement(StyledTextTip, {
    spacing: "m0",
    fontSize: "f1"
  }, props.tip)), hasAttachments && /*#__PURE__*/_react["default"].createElement(WithFilesDropzoneChild, null, /*#__PURE__*/_react["default"].createElement(FullWidthBox, {
    spacing: "mt1"
  }, props.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 (!props.savePending) props.onClickRemoveHandler(f);
      },
      "aria-label": removeLabel(f.name)
    }, /*#__PURE__*/_react["default"].createElement(_remove.Remove, null))));
  })), /*#__PURE__*/_react["default"].createElement(_unstyledButton.UnstyledButton, {
    onClick: function onClick() {
      if (!props.savePending) open();
    }
  }, /*#__PURE__*/_react["default"].createElement(IconTextBox, {
    spacing: "mv2"
  }, /*#__PURE__*/_react["default"].createElement(FullSizeAdd, null), /*#__PURE__*/_react["default"].createElement(_text.Text, {
    colorName: "brand-primary-base",
    spacing: ['mv0', 'ml1'],
    bold: true
  }, props.withFilesPrompt)))))), hasErrors && /*#__PURE__*/_react["default"].createElement(_box.Box, {
    spacing: ['mv1']
  }, /*#__PURE__*/_react["default"].createElement(CenteredText, {
    colorName: "error-fg"
  }, props.attachmentsError)));
};

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