"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Asset = void 0;
var _react = _interopRequireWildcard(require("react"));
var _eui = require("@elastic/eui");
var _i18n = require("@kbn/i18n");
var _services = require("../../services");
var _confirm_modal = require("../confirm_modal");
var _clipboard = require("../clipboard");
var _download = require("../download");
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 = {
  getCopyAssetTooltip: () => _i18n.i18n.translate('xpack.canvas.asset.copyAssetTooltip', {
    defaultMessage: 'Copy id to clipboard'
  }),
  getCreateImageTooltip: () => _i18n.i18n.translate('xpack.canvas.asset.createImageTooltip', {
    defaultMessage: 'Create image element'
  }),
  getDeleteAssetTooltip: () => _i18n.i18n.translate('xpack.canvas.asset.deleteAssetTooltip', {
    defaultMessage: 'Delete'
  }),
  getDownloadAssetTooltip: () => _i18n.i18n.translate('xpack.canvas.asset.downloadAssetTooltip', {
    defaultMessage: 'Download'
  }),
  getThumbnailAltText: () => _i18n.i18n.translate('xpack.canvas.asset.thumbnailAltText', {
    defaultMessage: 'Asset thumbnail'
  }),
  getConfirmModalButtonLabel: () => _i18n.i18n.translate('xpack.canvas.asset.confirmModalButtonLabel', {
    defaultMessage: 'Remove'
  }),
  getConfirmModalMessageText: () => _i18n.i18n.translate('xpack.canvas.asset.confirmModalDetail', {
    defaultMessage: 'Are you sure you want to remove this asset?'
  }),
  getConfirmModalTitle: () => _i18n.i18n.translate('xpack.canvas.asset.confirmModalTitle', {
    defaultMessage: 'Remove Asset'
  })
};
const Asset = ({
  asset,
  onCreate,
  onDelete
}) => {
  const {
    success
  } = (0, _services.useNotifyService)();
  const [isConfirmModalVisible, setIsConfirmModalVisible] = (0, _react.useState)(false);
  const onCopy = result => result && success(`Copied '${asset.id}' to clipboard`);
  const confirmModal = /*#__PURE__*/_react.default.createElement(_confirm_modal.ConfirmModal, {
    isOpen: isConfirmModalVisible,
    title: strings.getConfirmModalTitle(),
    message: strings.getConfirmModalMessageText(),
    confirmButtonText: strings.getConfirmModalButtonLabel(),
    onConfirm: () => {
      setIsConfirmModalVisible(false);
      onDelete(asset);
    },
    onCancel: () => setIsConfirmModalVisible(false)
  });
  const createImage = /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    className: "asset-create-image",
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    content: strings.getCreateImageTooltip()
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    iconType: "vector",
    "aria-label": strings.getCreateImageTooltip(),
    onClick: () => onCreate(asset.id)
  })));
  const downloadAsset = /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    className: "asset-download",
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    content: strings.getDownloadAssetTooltip()
  }, /*#__PURE__*/_react.default.createElement(_download.Download, {
    fileName: asset.id,
    content: asset.value
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    iconType: "sortDown",
    "aria-label": strings.getDownloadAssetTooltip()
  }))));
  const copyAsset = /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    content: strings.getCopyAssetTooltip()
  }, /*#__PURE__*/_react.default.createElement(_clipboard.Clipboard, {
    content: asset.id,
    onCopy: onCopy
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    iconType: "copyClipboard",
    "aria-label": strings.getCopyAssetTooltip()
  }))));
  const deleteAsset = /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    grow: false
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    content: strings.getDeleteAssetTooltip()
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiButtonIcon, {
    color: "danger",
    iconType: "trash",
    "aria-label": strings.getDeleteAssetTooltip(),
    onClick: () => setIsConfirmModalVisible(true)
  })));
  const thumbnail = /*#__PURE__*/_react.default.createElement("div", {
    className: "canvasAsset__thumb canvasCheckered"
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiImage, {
    className: "canvasAsset__img",
    size: "original",
    url: asset.value,
    fullScreenIconColor: "dark",
    alt: strings.getThumbnailAltText()
  }));
  const assetLabel = /*#__PURE__*/_react.default.createElement(_eui.EuiText, {
    size: "xs",
    className: "eui-textBreakAll"
  }, /*#__PURE__*/_react.default.createElement("p", {
    className: "eui-textBreakAll"
  }, /*#__PURE__*/_react.default.createElement("strong", null, asset.id), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_eui.EuiTextColor, {
    color: "subdued"
  }, /*#__PURE__*/_react.default.createElement("small", null, "(", Math.round(asset.value.length / 1024), " kb)"))));
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, {
    key: asset.id
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiPanel, {
    className: "canvasAsset",
    paddingSize: "s"
  }, thumbnail, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "s"
  }), assetLabel, /*#__PURE__*/_react.default.createElement(_eui.EuiSpacer, {
    size: "s"
  }), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    alignItems: "baseline",
    justifyContent: "center",
    responsive: false
  }, createImage, downloadAsset, copyAsset, deleteAsset)), isConfirmModalVisible ? confirmModal : null);
};
exports.Asset = Asset;