"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaPreview = MediaPreview;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _notices = require("@wordpress/notices");
var _blob = require("@wordpress/blob");
var _inserterDraggableBlocks = _interopRequireDefault(require("../../inserter-draggable-blocks"));
var _utils = require("./utils");
var _store = require("../../../store");
var _lockUnlock = require("../../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const ALLOWED_MEDIA_TYPES = ['image'];
const MAXIMUM_TITLE_LENGTH = 25;
const MEDIA_OPTIONS_POPOVER_PROPS = {
  position: 'bottom left',
  className: 'block-editor-inserter__media-list__item-preview-options__popover'
};
const {
  CompositeItemV2: CompositeItem
} = (0, _lockUnlock.unlock)(_components.privateApis);
function MediaPreviewOptions({
  category,
  media
}) {
  if (!category.getReportUrl) {
    return null;
  }
  const reportUrl = category.getReportUrl(media);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
    className: "block-editor-inserter__media-list__item-preview-options",
    label: (0, _i18n.__)('Options'),
    popoverProps: MEDIA_OPTIONS_POPOVER_PROPS,
    icon: _icons.moreVertical,
    children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
        onClick: () => window.open(reportUrl, '_blank').focus(),
        icon: _icons.external,
        children: (0, _i18n.sprintf)( /* translators: %s: The media type to report e.g: "image", "video", "audio" */
        (0, _i18n.__)('Report %s'), category.mediaType)
      })
    })
  });
}
function InsertExternalImageModal({
  onClose,
  onSubmit
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Modal, {
    title: (0, _i18n.__)('Insert external image'),
    onRequestClose: onClose,
    className: "block-editor-inserter-media-tab-media-preview-inserter-external-image-modal",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 3,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: (0, _i18n.__)('This image cannot be uploaded to your Media Library, but it can still be inserted as an external image.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: (0, _i18n.__)('External images can be removed by the external provider without warning and could even have legal compliance issues related to privacy legislation.')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      className: "block-editor-block-lock-modal__actions",
      justify: "flex-end",
      expanded: false,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          variant: "tertiary",
          onClick: onClose,
          children: (0, _i18n.__)('Cancel')
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          variant: "primary",
          onClick: onSubmit,
          children: (0, _i18n.__)('Insert')
        })
      })]
    })]
  });
}
function MediaPreview({
  media,
  onClick,
  category
}) {
  const [showExternalUploadModal, setShowExternalUploadModal] = (0, _element.useState)(false);
  const [isHovered, setIsHovered] = (0, _element.useState)(false);
  const [isInserting, setIsInserting] = (0, _element.useState)(false);
  const [block, preview] = (0, _element.useMemo)(() => (0, _utils.getBlockAndPreviewFromMedia)(media, category.mediaType), [media, category.mediaType]);
  const {
    createErrorNotice,
    createSuccessNotice
  } = (0, _data.useDispatch)(_notices.store);
  const {
    getSettings
  } = (0, _data.useSelect)(_store.store);
  const onMediaInsert = (0, _element.useCallback)(previewBlock => {
    // Prevent multiple uploads when we're in the process of inserting.
    if (isInserting) {
      return;
    }
    const settings = getSettings();
    const clonedBlock = (0, _blocks.cloneBlock)(previewBlock);
    const {
      id,
      url,
      caption
    } = clonedBlock.attributes;

    // User has no permission to upload media.
    if (!id && !settings.mediaUpload) {
      setShowExternalUploadModal(true);
      return;
    }

    // Media item already exists in library, so just insert it.
    if (!!id) {
      onClick(clonedBlock);
      return;
    }
    setIsInserting(true);
    // Media item does not exist in library, so try to upload it.
    // Fist fetch the image data. This may fail if the image host
    // doesn't allow CORS with the domain.
    // If this happens, we insert the image block using the external
    // URL and let the user know about the possible implications.
    window.fetch(url).then(response => response.blob()).then(blob => {
      settings.mediaUpload({
        filesList: [blob],
        additionalData: {
          caption
        },
        onFileChange([img]) {
          if ((0, _blob.isBlobURL)(img.url)) {
            return;
          }
          onClick({
            ...clonedBlock,
            attributes: {
              ...clonedBlock.attributes,
              id: img.id,
              url: img.url
            }
          });
          createSuccessNotice((0, _i18n.__)('Image uploaded and inserted.'), {
            type: 'snackbar'
          });
          setIsInserting(false);
        },
        allowedTypes: ALLOWED_MEDIA_TYPES,
        onError(message) {
          createErrorNotice(message, {
            type: 'snackbar'
          });
          setIsInserting(false);
        }
      });
    }).catch(() => {
      setShowExternalUploadModal(true);
      setIsInserting(false);
    });
  }, [isInserting, getSettings, onClick, createSuccessNotice, createErrorNotice]);
  const title = typeof media.title === 'string' ? media.title : media.title?.rendered || (0, _i18n.__)('no title');
  let truncatedTitle;
  if (title.length > MAXIMUM_TITLE_LENGTH) {
    const omission = '...';
    truncatedTitle = title.slice(0, MAXIMUM_TITLE_LENGTH - omission.length) + omission;
  }
  const onMouseEnter = (0, _element.useCallback)(() => setIsHovered(true), []);
  const onMouseLeave = (0, _element.useCallback)(() => setIsHovered(false), []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterDraggableBlocks.default, {
      isEnabled: true,
      blocks: [block],
      children: ({
        draggable,
        onDragStart,
        onDragEnd
      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _clsx.default)('block-editor-inserter__media-list__list-item', {
          'is-hovered': isHovered
        }),
        draggable: draggable,
        onDragStart: onDragStart,
        onDragEnd: onDragEnd,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          onMouseEnter: onMouseEnter,
          onMouseLeave: onMouseLeave,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
            text: truncatedTitle || title,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompositeItem, {
              render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                "aria-label": title,
                role: "option",
                className: "block-editor-inserter__media-list__item"
              }),
              onClick: () => onMediaInsert(block),
              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                className: "block-editor-inserter__media-list__item-preview",
                children: [preview, isInserting && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  className: "block-editor-inserter__media-list__item-preview-spinner",
                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {})
                })]
              })
            })
          }), !isInserting && /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaPreviewOptions, {
            category: category,
            media: media
          })]
        })
      })
    }), showExternalUploadModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(InsertExternalImageModal, {
      onClose: () => setShowExternalUploadModal(false),
      onSubmit: () => {
        onClick((0, _blocks.cloneBlock)(block));
        createSuccessNotice((0, _i18n.__)('Image inserted.'), {
          type: 'snackbar'
        });
        setShowExternalUploadModal(false);
      }
    })]
  });
}
//# sourceMappingURL=media-preview.js.map