"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AssetManager = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _constants = require("../../../common/lib/constants");
var _loading = require("../loading");
var _asset = require("./asset");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const strings = {
  getDescription: () => _i18n.i18n.translate('xpack.canvas.assetModal.modalDescription', {
    defaultMessage: 'Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.'
  }),
  getEmptyAssetsDescription: () => _i18n.i18n.translate('xpack.canvas.assetModal.emptyAssetsDescription', {
    defaultMessage: 'Import your assets to get started'
  }),
  getFilePickerPromptText: () => _i18n.i18n.translate('xpack.canvas.assetModal.filePickerPromptText', {
    defaultMessage: 'Select or drag and drop images'
  }),
  getLoadingText: () => _i18n.i18n.translate('xpack.canvas.assetModal.loadingText', {
    defaultMessage: 'Uploading images'
  }),
  getModalCloseButtonLabel: () => _i18n.i18n.translate('xpack.canvas.assetModal.modalCloseButtonLabel', {
    defaultMessage: 'Close'
  }),
  getModalTitle: () => _i18n.i18n.translate('xpack.canvas.assetModal.modalTitle', {
    defaultMessage: 'Manage workpad assets'
  }),
  getSpaceUsedText: percentageUsed => _i18n.i18n.translate('xpack.canvas.assetModal.spacedUsedText', {
    defaultMessage: '{percentageUsed}% space used',
    values: {
      percentageUsed
    }
  })
};
const AssetManager = props => {
  const {
    assets,
    onClose,
    onAddAsset
  } = props;
  const [isLoading, setIsLoading] = (0, _react.useState)(false);
  const assetsTotal = Math.round(assets.reduce((total, {
    value
  }) => total + value.length, 0) / 1024);
  const percentageUsed = Math.round(assetsTotal / _constants.ASSET_MAX_SIZE * 100);
  const emptyAssets = /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    className: "canvasAssetManager__emptyPanel"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiEmptyPrompt, {
    iconType: "importAction",
    title: /*#__PURE__*/_react.default.createElement("h2", null, strings.getEmptyAssetsDescription()),
    titleSize: "xs"
  }));
  const onFileUpload = files => {
    if (files === null) {
      return;
    }
    setIsLoading(true);
    Promise.all(Array.from(files).map(file => onAddAsset(file))).finally(() => {
      setIsLoading(false);
    });
  };
  return /*#__PURE__*/_react.default.createElement(_eui.EuiModal, {
    onClose: () => onClose(),
    className: "canvasAssetManager canvasModal--fixedSize",
    maxWidth: "1000px"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiModalHeader, {
    className: "canvasAssetManager__modalHeader"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiModalHeaderTitle, {
    className: "canvasAssetManager__modalHeaderTitle"
  }, strings.getModalTitle()), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    className: "canvasAssetManager__fileUploadWrapper"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, isLoading ? /*#__PURE__*/_react.default.createElement(_loading.Loading, {
    animated: true,
    text: strings.getLoadingText()
  }) : /*#__PURE__*/_react.default.createElement(_eui.EuiFilePicker, {
    initialPromptText: strings.getFilePickerPromptText(),
    compressed: true,
    display: "default",
    multiple: true,
    onChange: onFileUpload,
    accept: "image/*"
  })))), /*#__PURE__*/_react.default.createElement(_eui.EuiModalBody, null, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    size: "s",
    color: "subdued"
  }, /*#__PURE__*/_react.default.createElement("p", null, strings.getDescription())), /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, null), assets.length ? /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGrid, {
    columns: 4
  }, assets.map(asset => /*#__PURE__*/_react.default.createElement(_asset.Asset, {
    asset: asset,
    key: asset.id
  }))) : emptyAssets), /*#__PURE__*/_react.default.createElement(_eui.EuiModalFooter, {
    className: "canvasAssetManager__modalFooter"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    className: "canvasAssetManager__meterWrapper",
    responsive: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiProgress, {
    value: assetsTotal,
    max: _constants.ASSET_MAX_SIZE,
    color: percentageUsed < 90 ? 'success' : 'danger',
    size: "s",
    "aria-labelledby": "CanvasAssetManagerLabel"
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false,
    className: "eui-textNoWrap"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    id: "CanvasAssetManagerLabel"
  }, strings.getSpaceUsedText(percentageUsed)))), /*#__PURE__*/_react.default.createElement(_eui.EuiButton, {
    size: "s",
    onClick: () => onClose()
  }, strings.getModalCloseButtonLabel())));
};
exports.AssetManager = AssetManager;
AssetManager.propTypes = {
  assets: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
  onClose: _propTypes.default.func.isRequired,
  onAddAsset: _propTypes.default.func.isRequired
};