"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _mediaPanel = require("./media-panel");
var _check = _interopRequireDefault(require("../../media-upload/check"));
var _mediaUpload = _interopRequireDefault(require("../../media-upload"));
var _hooks = require("./hooks");
var _utils = require("./utils");
var _mobileTabNavigation = _interopRequireDefault(require("../mobile-tab-navigation"));
var _categoryTabs = _interopRequireDefault(require("../category-tabs"));
var _noResults = _interopRequireDefault(require("../no-results"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];
function MediaTab({
  rootClientId,
  selectedCategory,
  onSelectCategory,
  setHasCategories,
  onInsert,
  children
}) {
  const mediaCategories = (0, _hooks.useMediaCategories)(rootClientId);
  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
  const baseCssClass = 'block-editor-inserter__media-tabs';
  const onSelectMedia = (0, _element.useCallback)(media => {
    if (!media?.url) {
      return;
    }
    const [block] = (0, _utils.getBlockAndPreviewFromMedia)(media, media.type);
    onInsert(block);
  }, [onInsert]);
  const categories = (0, _element.useMemo)(() => mediaCategories.map(mediaCategory => ({
    ...mediaCategory,
    label: mediaCategory.labels.name
  })), [mediaCategories]);
  (0, _element.useEffect)(() => {
    setHasCategories(!!categories.length);
  }, [categories, setHasCategories]);
  if (!categories.length) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_noResults.default, {});
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: `${baseCssClass}-container`,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_categoryTabs.default, {
        categories: categories,
        selectedCategory: selectedCategory,
        onSelectCategory: onSelectCategory,
        children: children
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaUpload.default, {
          multiple: false,
          onSelect: onSelectMedia,
          allowedTypes: ALLOWED_MEDIA_TYPES,
          render: ({
            open
          }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            onClick: event => {
              // Safari doesn't emit a focus event on button elements when
              // clicked and we need to manually focus the button here.
              // The reason is that core's Media Library modal explicitly triggers a
              // focus event and therefore a `blur` event is triggered on a different
              // element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
              // attribute making the Inserter dialog to close.
              event.target.focus();
              open();
            },
            className: "block-editor-inserter__media-library-button",
            variant: "secondary",
            "data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal",
            children: (0, _i18n.__)('Open Media Library')
          })
        })
      })]
    }), isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileTabNavigation.default, {
      categories: categories,
      children: category => /*#__PURE__*/(0, _jsxRuntime.jsx)(_mediaPanel.MediaCategoryPanel, {
        onInsert: onInsert,
        rootClientId: rootClientId,
        category: category
      })
    })]
  });
}
var _default = exports.default = MediaTab;
//# sourceMappingURL=media-tab.js.map