/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { applyFilters } from '@wordpress/hooks';
import { DropZone, Button, Spinner, withNotices, withFilters, __experimentalHStack as HStack, Notice } from '@wordpress/components';
import { isBlobURL } from '@wordpress/blob';
import { useState, useRef } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { useSelect, withDispatch, withSelect } from '@wordpress/data';
import { MediaUpload, MediaUploadCheck, store as blockEditorStore } from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';

/**
 * Internal dependencies
 */
import PostFeaturedImageCheck from './check';
import { store as editorStore } from '../../store';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const ALLOWED_MEDIA_TYPES = ['image'];

// Used when labels from post type were not yet loaded or when they are not present.
const DEFAULT_FEATURE_IMAGE_LABEL = __('Featured image');
const DEFAULT_SET_FEATURE_IMAGE_LABEL = __('Add a featured image');
const instructions = /*#__PURE__*/_jsx("p", {
  children: __('To edit the featured image, you need permission to upload media.')
});
function getMediaDetails(media, postId) {
  var _media$media_details$, _media$media_details$2;
  if (!media) {
    return {};
  }
  const defaultSize = applyFilters('editor.PostFeaturedImage.imageSize', 'large', media.id, postId);
  if (defaultSize in ((_media$media_details$ = media?.media_details?.sizes) !== null && _media$media_details$ !== void 0 ? _media$media_details$ : {})) {
    return {
      mediaWidth: media.media_details.sizes[defaultSize].width,
      mediaHeight: media.media_details.sizes[defaultSize].height,
      mediaSourceUrl: media.media_details.sizes[defaultSize].source_url
    };
  }

  // Use fallbackSize when defaultSize is not available.
  const fallbackSize = applyFilters('editor.PostFeaturedImage.imageSize', 'thumbnail', media.id, postId);
  if (fallbackSize in ((_media$media_details$2 = media?.media_details?.sizes) !== null && _media$media_details$2 !== void 0 ? _media$media_details$2 : {})) {
    return {
      mediaWidth: media.media_details.sizes[fallbackSize].width,
      mediaHeight: media.media_details.sizes[fallbackSize].height,
      mediaSourceUrl: media.media_details.sizes[fallbackSize].source_url
    };
  }

  // Use full image size when fallbackSize and defaultSize are not available.
  return {
    mediaWidth: media.media_details.width,
    mediaHeight: media.media_details.height,
    mediaSourceUrl: media.source_url
  };
}
function PostFeaturedImage({
  currentPostId,
  featuredImageId,
  onUpdateImage,
  onRemoveImage,
  media,
  postType,
  noticeUI,
  noticeOperations,
  isRequestingFeaturedImageMedia
}) {
  const returnsFocusRef = useRef(false);
  const [isLoading, setIsLoading] = useState(false);
  const {
    getSettings
  } = useSelect(blockEditorStore);
  const {
    mediaSourceUrl
  } = getMediaDetails(media, currentPostId);
  function onDropFiles(filesList) {
    getSettings().mediaUpload({
      allowedTypes: ALLOWED_MEDIA_TYPES,
      filesList,
      onFileChange([image]) {
        if (isBlobURL(image?.url)) {
          setIsLoading(true);
          return;
        }
        if (image) {
          onUpdateImage(image);
        }
        setIsLoading(false);
      },
      onError(message) {
        noticeOperations.removeAllNotices();
        noticeOperations.createErrorNotice(message);
      },
      multiple: false
    });
  }

  /**
   * Generates the featured image alt text for this editing context.
   *
   * @param {Object} imageMedia                               The image media object.
   * @param {string} imageMedia.alt_text                      The alternative text of the image.
   * @param {Object} imageMedia.media_details                 The media details of the image.
   * @param {Object} imageMedia.media_details.sizes           The sizes of the image.
   * @param {Object} imageMedia.media_details.sizes.full      The full size details of the image.
   * @param {string} imageMedia.media_details.sizes.full.file The file name of the full size image.
   * @param {string} imageMedia.slug                          The slug of the image.
   * @return {string} The featured image alt text.
   */
  function getImageDescription(imageMedia) {
    if (imageMedia.alt_text) {
      return sprintf(
      // Translators: %s: The selected image alt text.
      __('Current image: %s'), imageMedia.alt_text);
    }
    return sprintf(
    // Translators: %s: The selected image filename.
    __('The current image has no alternative text. The file name is: %s'), imageMedia.media_details.sizes?.full?.file || imageMedia.slug);
  }
  function returnFocus(node) {
    if (returnsFocusRef.current && node) {
      node.focus();
      returnsFocusRef.current = false;
    }
  }
  const isMissingMedia = !isRequestingFeaturedImageMedia && !!featuredImageId && !media;
  return /*#__PURE__*/_jsxs(PostFeaturedImageCheck, {
    children: [noticeUI, /*#__PURE__*/_jsxs("div", {
      className: "editor-post-featured-image",
      children: [media && /*#__PURE__*/_jsx("div", {
        id: `editor-post-featured-image-${featuredImageId}-describedby`,
        className: "hidden",
        children: getImageDescription(media)
      }), /*#__PURE__*/_jsx(MediaUploadCheck, {
        fallback: instructions,
        children: /*#__PURE__*/_jsx(MediaUpload, {
          title: postType?.labels?.featured_image || DEFAULT_FEATURE_IMAGE_LABEL,
          onSelect: onUpdateImage,
          unstableFeaturedImageFlow: true,
          allowedTypes: ALLOWED_MEDIA_TYPES,
          modalClass: "editor-post-featured-image__media-modal",
          render: ({
            open
          }) => /*#__PURE__*/_jsxs("div", {
            className: "editor-post-featured-image__container",
            children: [isMissingMedia ? /*#__PURE__*/_jsx(Notice, {
              status: "warning",
              isDismissible: false,
              children: __('Could not retrieve the featured image data.')
            }) : /*#__PURE__*/_jsxs(Button, {
              __next40pxDefaultSize: true,
              ref: returnFocus,
              className: !featuredImageId ? 'editor-post-featured-image__toggle' : 'editor-post-featured-image__preview',
              onClick: open,
              "aria-label": !featuredImageId ? null : __('Edit or replace the featured image'),
              "aria-describedby": !featuredImageId ? null : `editor-post-featured-image-${featuredImageId}-describedby`,
              "aria-haspopup": "dialog",
              disabled: isLoading,
              accessibleWhenDisabled: true,
              children: [!!featuredImageId && media && /*#__PURE__*/_jsx("img", {
                className: "editor-post-featured-image__preview-image",
                src: mediaSourceUrl,
                alt: getImageDescription(media)
              }), (isLoading || isRequestingFeaturedImageMedia) && /*#__PURE__*/_jsx(Spinner, {}), !featuredImageId && !isLoading && (postType?.labels?.set_featured_image || DEFAULT_SET_FEATURE_IMAGE_LABEL)]
            }), !!featuredImageId && /*#__PURE__*/_jsxs(HStack, {
              className: clsx('editor-post-featured-image__actions', {
                'editor-post-featured-image__actions-missing-image': isMissingMedia,
                'editor-post-featured-image__actions-is-requesting-image': isRequestingFeaturedImageMedia
              }),
              children: [/*#__PURE__*/_jsx(Button, {
                __next40pxDefaultSize: true,
                className: "editor-post-featured-image__action",
                onClick: open,
                "aria-haspopup": "dialog",
                variant: isMissingMedia ? 'secondary' : undefined,
                children: __('Replace')
              }), /*#__PURE__*/_jsx(Button, {
                __next40pxDefaultSize: true,
                className: "editor-post-featured-image__action",
                onClick: () => {
                  onRemoveImage();
                  // Signal that the toggle button should be focused,
                  // when it is rendered. Can't focus it directly here
                  // because it's rendered conditionally.
                  returnsFocusRef.current = true;
                },
                variant: isMissingMedia ? 'secondary' : undefined,
                isDestructive: isMissingMedia,
                children: __('Remove')
              })]
            }), /*#__PURE__*/_jsx(DropZone, {
              onFilesDrop: onDropFiles
            })]
          }),
          value: featuredImageId
        })
      })]
    })]
  });
}
const applyWithSelect = withSelect(select => {
  const {
    getEntityRecord,
    getPostType,
    hasFinishedResolution
  } = select(coreStore);
  const {
    getCurrentPostId,
    getEditedPostAttribute
  } = select(editorStore);
  const featuredImageId = getEditedPostAttribute('featured_media');
  return {
    media: featuredImageId ? getEntityRecord('postType', 'attachment', featuredImageId, {
      context: 'view'
    }) : null,
    currentPostId: getCurrentPostId(),
    postType: getPostType(getEditedPostAttribute('type')),
    featuredImageId,
    isRequestingFeaturedImageMedia: !!featuredImageId && !hasFinishedResolution('getEntityRecord', ['postType', 'attachment', featuredImageId, {
      context: 'view'
    }])
  };
});
const applyWithDispatch = withDispatch((dispatch, {
  noticeOperations
}, {
  select
}) => {
  const {
    editPost
  } = dispatch(editorStore);
  return {
    onUpdateImage(image) {
      editPost({
        featured_media: image.id
      });
    },
    onDropImage(filesList) {
      select(blockEditorStore).getSettings().mediaUpload({
        allowedTypes: ['image'],
        filesList,
        onFileChange([image]) {
          editPost({
            featured_media: image.id
          });
        },
        onError(message) {
          noticeOperations.removeAllNotices();
          noticeOperations.createErrorNotice(message);
        },
        multiple: false
      });
    },
    onRemoveImage() {
      editPost({
        featured_media: 0
      });
    }
  };
});

/**
 * Renders the component for managing the featured image of a post.
 *
 * @param {Object}   props                  Props.
 * @param {number}   props.currentPostId    ID of the current post.
 * @param {number}   props.featuredImageId  ID of the featured image.
 * @param {Function} props.onUpdateImage    Function to call when the image is updated.
 * @param {Function} props.onRemoveImage    Function to call when the image is removed.
 * @param {Object}   props.media            The media object representing the featured image.
 * @param {string}   props.postType         Post type.
 * @param {Element}  props.noticeUI         UI for displaying notices.
 * @param {Object}   props.noticeOperations Operations for managing notices.
 *
 * @return {Element} Component to be rendered .
 */
export default compose(withNotices, applyWithSelect, applyWithDispatch, withFilters('editor.PostFeaturedImage'))(PostFeaturedImage);
//# sourceMappingURL=index.js.map