"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ImageEdit = void 0;
var _reactNative = require("react-native");
var _native = require("@react-navigation/native");
var _element = require("@wordpress/element");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _url = require("@wordpress/url");
var _hooks = require("@wordpress/hooks");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _icons = require("@wordpress/icons");
var _coreData = require("@wordpress/core-data");
var _notices = require("@wordpress/notices");
var _editPost = require("@wordpress/edit-post");
var _styles = _interopRequireDefault(require("./styles.scss"));
var _utils = require("./utils");
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

// eslint-disable-next-line no-restricted-imports

/**
 * Internal dependencies
 */

const getUrlForSlug = (image, sizeSlug) => {
  if (!sizeSlug) {
    return undefined;
  }
  return image?.media_details?.sizes?.[sizeSlug]?.source_url;
};
function LinkSettings({
  attributes,
  image,
  isLinkSheetVisible,
  setMappedAttributes
}) {
  const route = (0, _native.useRoute)();
  const {
    href: url,
    label,
    linkDestination,
    linkTarget,
    rel
  } = attributes;

  // Persist attributes passed from child screen.
  (0, _element.useEffect)(() => {
    const {
      inputValue: newUrl
    } = route.params || {};
    let newLinkDestination;
    switch (newUrl) {
      case attributes.url:
        newLinkDestination = _constants.LINK_DESTINATION_MEDIA;
        break;
      case image?.link:
        newLinkDestination = _constants.LINK_DESTINATION_ATTACHMENT;
        break;
      case '':
        newLinkDestination = _constants.LINK_DESTINATION_NONE;
        break;
      default:
        newLinkDestination = _constants.LINK_DESTINATION_CUSTOM;
        break;
    }
    setMappedAttributes({
      url: newUrl,
      linkDestination: newLinkDestination
    });
  }, [route.params?.inputValue]);
  let valueMask;
  switch (linkDestination) {
    case _constants.LINK_DESTINATION_MEDIA:
      valueMask = (0, _i18n.__)('Media File');
      break;
    case _constants.LINK_DESTINATION_ATTACHMENT:
      valueMask = (0, _i18n.__)('Attachment Page');
      break;
    case _constants.LINK_DESTINATION_CUSTOM:
      valueMask = (0, _i18n.__)('Custom URL');
      break;
    default:
      valueMask = (0, _i18n.__)('None');
      break;
  }
  const linkSettingsOptions = {
    url: {
      valueMask,
      autoFocus: false,
      autoFill: false
    },
    openInNewTab: {
      label: (0, _i18n.__)('Open in new tab')
    },
    linkRel: {
      label: (0, _i18n.__)('Link Rel'),
      placeholder: (0, _i18n._x)('None', 'Link rel attribute value placeholder')
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
    title: (0, _i18n.__)('Link Settings'),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.LinkSettingsNavigation, {
      isVisible: isLinkSheetVisible,
      url: url,
      rel: rel,
      label: label,
      linkTarget: linkTarget,
      setAttributes: setMappedAttributes,
      withBottomSheet: false,
      hasPicker: true,
      options: linkSettingsOptions,
      showIcon: false,
      onLinkCellPressed: ({
        navigation
      }) => {
        navigation.navigate(_blockEditor.blockSettingsScreens.imageLinkDestinations, {
          inputValue: attributes.href,
          linkDestination: attributes.linkDestination,
          imageUrl: attributes.url,
          attachmentPageUrl: image?.link
        });
      }
    })
  });
}
const UPLOAD_STATE_IDLE = 0;
const UPLOAD_STATE_UPLOADING = 1;
const UPLOAD_STATE_SUCCEEDED = 2;
const UPLOAD_STATE_FAILED = 3;
class ImageEdit extends _element.Component {
  constructor(props) {
    super(props);
    this.state = {
      isCaptionSelected: false,
      uploadStatus: UPLOAD_STATE_IDLE
    };
    this.replacedFeaturedImage = false;
    this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(this);
    this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(this);
    this.mediaUploadStateReset = this.mediaUploadStateReset.bind(this);
    this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(this);
    this.updateMediaProgress = this.updateMediaProgress.bind(this);
    this.updateImageURL = this.updateImageURL.bind(this);
    this.onSetNewTab = this.onSetNewTab.bind(this);
    this.onSetSizeSlug = this.onSetSizeSlug.bind(this);
    this.onImagePressed = this.onImagePressed.bind(this);
    this.onSetFeatured = this.onSetFeatured.bind(this);
    this.onFocusCaption = this.onFocusCaption.bind(this);
    this.onSelectURL = this.onSelectURL.bind(this);
    this.accessibilityLabelCreator = this.accessibilityLabelCreator.bind(this);
    this.setMappedAttributes = this.setMappedAttributes.bind(this);
    this.onSizeChangeValue = this.onSizeChangeValue.bind(this);
  }
  componentDidMount() {
    const {
      attributes,
      setAttributes
    } = this.props;
    // This will warn when we have `id` defined, while `url` is undefined.
    // This may help track this issue: https://github.com/wordpress-mobile/WordPress-Android/issues/9768
    // where a cancelled image upload was resulting in a subsequent crash.
    if (attributes.id && !attributes.url) {
      // eslint-disable-next-line no-console
      console.warn('Attributes has id with no url.');
    }

    // Detect any pasted image and start an upload.
    if (!attributes.id && attributes.url && (0, _url.getProtocol)(attributes.url) === 'file:') {
      (0, _reactNativeBridge.requestMediaImport)(attributes.url, (id, url) => {
        if (url) {
          setAttributes({
            id,
            url
          });
        }
      });
    }

    // Make sure we mark any temporary images as failed if they failed while
    // the editor wasn't open.
    if (attributes.id && attributes.url && (0, _url.getProtocol)(attributes.url) === 'file:') {
      (0, _reactNativeBridge.mediaUploadSync)();
    }
  }
  componentWillUnmount() {
    // This action will only exist if the user pressed the trash button on the block holder.
    if ((0, _hooks.hasAction)('blocks.onRemoveBlockCheckUpload') && this.state.uploadStatus === UPLOAD_STATE_UPLOADING) {
      (0, _hooks.doAction)('blocks.onRemoveBlockCheckUpload', this.props.attributes.id);
    }
  }
  componentDidUpdate(previousProps) {
    const {
      image,
      attributes,
      setAttributes,
      featuredImageId
    } = this.props;
    const {
      url
    } = attributes;
    if (!previousProps.image && image) {
      if (!(0, _url.hasQueryArg)(url, 'w') && attributes?.sizeSlug) {
        const updatedUrl = getUrlForSlug(image, attributes.sizeSlug) || image.source_url;
        setAttributes({
          url: updatedUrl
        });
      }
    }
    const {
      id
    } = attributes;
    const {
      id: previousId
    } = previousProps.attributes;

    // The media changed and the previous media was set as the Featured Image,
    // we must keep track of the previous media's featured status to act on it
    // once the new media has a finalized ID.
    if (!!id && id !== previousId && !!featuredImageId && featuredImageId === previousId) {
      this.replacedFeaturedImage = true;
    }

    // The media changed and now has a finalized ID (e.g. upload completed), we
    // should attempt to replace the featured image if applicable.
    if (this.replacedFeaturedImage && !!image && this.canImageBeFeatured()) {
      this.replacedFeaturedImage = false;
      (0, _reactNativeBridge.setFeaturedImage)(id);
    }
    const {
      align
    } = attributes;
    const {
      __unstableMarkNextChangeAsNotPersistent
    } = this.props;

    // Update the attributes if the align is wide or full
    if (['wide', 'full'].includes(align)) {
      __unstableMarkNextChangeAsNotPersistent();
      setAttributes({
        width: undefined,
        height: undefined,
        aspectRatio: undefined,
        scale: undefined
      });
    }
  }
  static getDerivedStateFromProps(props, state) {
    // Avoid a UI flicker in the toolbar by insuring that isCaptionSelected
    // is updated immediately any time the isSelected prop becomes false.
    return {
      isCaptionSelected: props.isSelected && state.isCaptionSelected
    };
  }
  accessibilityLabelCreator(caption) {
    // Checks if caption is empty.
    return _blockEditor.RichText.isEmpty(caption) ? /* translators: accessibility text. Empty image caption. */
    'Image caption. Empty' : (0, _i18n.sprintf)( /* translators: accessibility text. %s: image caption. */
    (0, _i18n.__)('Image caption. %s'), caption);
  }
  onImagePressed() {
    const {
      attributes,
      image
    } = this.props;
    if (this.state.uploadStatus === UPLOAD_STATE_UPLOADING) {
      (0, _reactNativeBridge.requestImageUploadCancelDialog)(attributes.id);
    } else if (attributes.id && (0, _url.getProtocol)(attributes.url) === 'file:') {
      (0, _reactNativeBridge.requestImageFailedRetryDialog)(attributes.id);
    } else if (!this.state.isCaptionSelected) {
      (0, _reactNativeBridge.requestImageFullscreenPreview)(attributes.url, image && image.source_url);
    }
    this.setState({
      isCaptionSelected: false
    });
  }
  updateMediaProgress(payload) {
    const {
      setAttributes
    } = this.props;
    if (payload.mediaUrl) {
      setAttributes({
        url: payload.mediaUrl
      });
    }
    if (this.state.uploadStatus !== UPLOAD_STATE_UPLOADING) {
      this.setState({
        uploadStatus: UPLOAD_STATE_UPLOADING
      });
    }
  }
  finishMediaUploadWithSuccess(payload) {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      url: payload.mediaUrl,
      id: payload.mediaServerId
    });
    this.setState({
      uploadStatus: UPLOAD_STATE_SUCCEEDED
    });
  }
  finishMediaUploadWithFailure(payload) {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      id: payload.mediaId
    });
    this.setState({
      uploadStatus: UPLOAD_STATE_FAILED
    });
  }
  mediaUploadStateReset() {
    const {
      setAttributes
    } = this.props;
    setAttributes({
      id: null,
      url: null
    });
    this.setState({
      uploadStatus: UPLOAD_STATE_IDLE
    });
  }
  updateImageURL(url) {
    this.props.setAttributes({
      url,
      width: undefined,
      height: undefined
    });
  }
  onSetNewTab(value) {
    const updatedLinkTarget = (0, _utils.getUpdatedLinkTargetSettings)(value, this.props.attributes);
    this.props.setAttributes(updatedLinkTarget);
  }
  onSetSizeSlug(sizeSlug) {
    const {
      image,
      setAttributes
    } = this.props;
    const url = getUrlForSlug(image, sizeSlug);
    if (!url) {
      return null;
    }
    setAttributes({
      url,
      width: undefined,
      height: undefined,
      sizeSlug
    });
  }
  onSelectMediaUploadOption(media) {
    const {
      imageDefaultSize
    } = this.props;
    const {
      id,
      url,
      destination
    } = this.props.attributes;
    const mediaAttributes = {
      id: media.id,
      url: media.url,
      caption: media.caption,
      alt: media.alt
    };
    let additionalAttributes;
    // Reset the dimension attributes if changing to a different image.
    if (!media.id || media.id !== id) {
      additionalAttributes = {
        width: undefined,
        height: undefined,
        sizeSlug: imageDefaultSize
      };
    } else {
      // Keep the same url when selecting the same file, so "Image Size" option is not changed.
      additionalAttributes = {
        url
      };
    }
    let href;
    switch (destination) {
      case _constants.LINK_DESTINATION_MEDIA:
        href = media.url;
        break;
      case _constants.LINK_DESTINATION_ATTACHMENT:
        href = media.link;
        break;
    }
    mediaAttributes.href = href;
    this.props.setAttributes({
      ...mediaAttributes,
      ...additionalAttributes
    });
  }
  onSelectURL(newURL) {
    const {
      createErrorNotice,
      imageDefaultSize,
      setAttributes
    } = this.props;
    if ((0, _url.isURL)(newURL)) {
      this.setState({
        isFetchingImage: true
      });

      // Use RN's Image.getSize to determine if URL is a valid image
      _reactNative.Image.getSize(newURL, () => {
        setAttributes({
          url: newURL,
          id: undefined,
          width: undefined,
          height: undefined,
          sizeSlug: imageDefaultSize
        });
        this.setState({
          isFetchingImage: false
        });
      }, () => {
        createErrorNotice((0, _i18n.__)('Image file not found.'));
        this.setState({
          isFetchingImage: false
        });
      });
    } else {
      createErrorNotice((0, _i18n.__)('Invalid URL.'));
    }
  }
  onFocusCaption() {
    if (this.props.onFocus) {
      this.props.onFocus();
    }
    if (!this.state.isCaptionSelected) {
      this.setState({
        isCaptionSelected: true
      });
    }
  }
  getPlaceholderIcon() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
      icon: _icons.image,
      ...this.props.getStylesFromColorScheme(_styles.default.iconPlaceholder, _styles.default.iconPlaceholderDark)
    });
  }
  showLoadingIndicator() {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: _styles.default.image__loading,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
        animating: true
      })
    });
  }
  getWidth() {
    const {
      attributes
    } = this.props;
    const {
      align,
      width
    } = attributes;
    return Object.values(_components.WIDE_ALIGNMENTS.alignments).includes(align) ? '100%' : width;
  }
  setMappedAttributes({
    url: href,
    linkDestination,
    ...restAttributes
  }) {
    const {
      setAttributes
    } = this.props;
    if (!href && !linkDestination) {
      linkDestination = _constants.LINK_DESTINATION_NONE;
    } else if (!linkDestination) {
      linkDestination = _constants.LINK_DESTINATION_CUSTOM;
    }
    return href === undefined || href === this.props.attributes.href ? setAttributes(restAttributes) : setAttributes({
      ...restAttributes,
      linkDestination,
      href
    });
  }
  getAltTextSettings() {
    const {
      attributes: {
        alt
      }
    } = this.props;
    const updateAlt = newAlt => {
      this.props.setAttributes({
        alt: newAlt
      });
    };
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheetTextControl, {
      initialValue: alt,
      onChange: updateAlt,
      placeholder: (0, _i18n.__)('Add alt text'),
      label: (0, _i18n.__)('Alt Text'),
      icon: _icons.textColor,
      footerNote: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [(0, _i18n.__)('Describe the purpose of the image. Leave empty if decorative.'), ' ', /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageLink, {
          href:
          // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
          (0, _i18n.__)('https://www.w3.org/WAI/tutorials/images/decision-tree/'),
          value: (0, _i18n.__)('What is alt text?')
        })]
      })
    });
  }
  onSizeChangeValue(newValue) {
    this.onSetSizeSlug(newValue);
  }
  onSetFeatured(mediaId) {
    const {
      closeSettingsBottomSheet
    } = this.props;
    (0, _reactNativeBridge.setFeaturedImage)(mediaId);
    closeSettingsBottomSheet();
  }
  getFeaturedButtonPanel(isFeaturedImage) {
    const {
      attributes,
      getStylesFromColorScheme
    } = this.props;
    const setFeaturedButtonStyle = getStylesFromColorScheme(_styles.default.setFeaturedButton, _styles.default.setFeaturedButtonDark);
    const removeFeaturedButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
      label: (0, _i18n.__)('Remove as Featured Image'),
      labelStyle: [setFeaturedButtonStyle, _styles.default.removeFeaturedButton],
      cellContainerStyle: _styles.default.setFeaturedButtonCellContainer,
      separatorType: "none",
      onPress: () => this.onSetFeatured(_constants.MEDIA_ID_NO_FEATURED_IMAGE_SET)
    });
    const setFeaturedButton = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.Cell, {
      label: (0, _i18n.__)('Set as Featured Image'),
      labelStyle: setFeaturedButtonStyle,
      cellContainerStyle: _styles.default.setFeaturedButtonCellContainer,
      separatorType: "none",
      onPress: () => this.onSetFeatured(attributes.id)
    });
    return isFeaturedImage ? removeFeaturedButton() : setFeaturedButton();
  }

  /**
   * Featured images must be set to a successfully uploaded self-hosted image,
   * which has an ID.
   *
   * @return {boolean} Boolean indicating whether or not the current may be set as featured.
   */
  canImageBeFeatured() {
    const {
      attributes: {
        id
      }
    } = this.props;
    return typeof id !== 'undefined' && this.state.uploadStatus !== UPLOAD_STATE_UPLOADING && this.state.uploadStatus !== UPLOAD_STATE_FAILED;
  }
  isGif(url) {
    return url.toLowerCase().includes('.gif');
  }
  render() {
    const {
      isCaptionSelected,
      isFetchingImage
    } = this.state;
    const {
      attributes,
      isSelected,
      image,
      clientId,
      imageDefaultSize,
      context,
      featuredImageId,
      wasBlockJustInserted,
      shouldUseFastImage
    } = this.props;
    const {
      align,
      url,
      alt,
      id,
      sizeSlug,
      className
    } = attributes;
    const hasImageContext = context ? Object.keys(context).length > 0 : false;
    const imageSizes = Array.isArray(this.props.imageSizes) ? this.props.imageSizes : [];
    // Only map available image sizes for the user to choose.
    const sizeOptions = imageSizes.filter(({
      slug
    }) => getUrlForSlug(image, slug)).map(({
      name,
      slug
    }) => ({
      value: slug,
      label: name
    }));
    let selectedSizeOption = sizeSlug || imageDefaultSize;
    let sizeOptionsValid = sizeOptions.find(option => option.value === selectedSizeOption);
    if (!sizeOptionsValid) {
      // Default to 'full' size if the default large size is not available.
      sizeOptionsValid = sizeOptions.find(option => option.value === 'full');
      selectedSizeOption = 'full';
    }
    const canImageBeFeatured = this.canImageBeFeatured();
    const isFeaturedImage = canImageBeFeatured && featuredImageId === attributes.id;
    const getToolbarEditButton = open => /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
          title: (0, _i18n.__)('Edit image'),
          icon: _icons.replace,
          onClick: open
        })
      })
    });
    const getInspectorControls = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
        title: (0, _i18n.__)('Settings')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
        style: _styles.default.panelBody,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockStyles, {
          clientId: clientId,
          url: url
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
        children: [image && sizeOptionsValid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheetSelectControl, {
          icon: _icons.fullscreen,
          label: (0, _i18n.__)('Size'),
          options: sizeOptions,
          onChange: this.onSizeChangeValue,
          value: selectedSizeOption
        }), this.getAltTextSettings()]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkSettings, {
        attributes: this.props.attributes,
        image: this.props.image,
        isLinkSheetVisible: this.state.isLinkSheetVisible,
        setMappedAttributes: this.setMappedAttributes
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.PanelBody, {
        title: (0, _i18n.__)('Featured Image'),
        titleStyle: _styles.default.featuredImagePanelTitle,
        children: [canImageBeFeatured && this.getFeaturedButtonPanel(isFeaturedImage), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FooterMessageControl, {
          label: (0, _i18n.__)('Changes to featured image will not be affected by the undo/redo buttons.'),
          cellContainerStyle: _styles.default.setFeaturedButtonCellContainer
        })]
      })]
    });
    if (!url) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _styles.default.content,
        children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaPlaceholder, {
          allowedTypes: [_blockEditor.MEDIA_TYPE_IMAGE],
          onSelect: this.onSelectMediaUploadOption,
          onSelectURL: this.onSelectURL,
          icon: this.getPlaceholderIcon(),
          onFocus: this.props.onFocus,
          autoOpenMediaUpload: isSelected && wasBlockJustInserted
        })]
      });
    }
    const alignToFlex = {
      left: 'flex-start',
      center: 'center',
      right: 'flex-end',
      full: 'center',
      wide: 'center'
    };
    const additionalImageProps = {
      height: '100%',
      resizeMode: context?.imageCrop ? 'cover' : 'contain'
    };
    const imageContainerStyles = [context?.fixedHeight && _styles.default.fixedHeight];
    const isGif = this.isGif(url);
    const badgeLabelShown = isFeaturedImage || isGif;
    let badgeLabelText = '';
    if (isFeaturedImage) {
      badgeLabelText = (0, _i18n.__)('Featured');
    } else if (isGif) {
      badgeLabelText = (0, _i18n.__)('GIF');
    }
    const getImageComponent = (openMediaOptions, getMediaOptions) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Badge, {
      label: badgeLabelText,
      show: badgeLabelShown,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
        accessible: !isSelected,
        onPress: this.onImagePressed,
        disabled: !isSelected,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: _styles.default.content,
          children: [isSelected && getInspectorControls(), isSelected && getMediaOptions(), !this.state.isCaptionSelected && getToolbarEditButton(openMediaOptions), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUploadProgress, {
            enablePausedUploads: true,
            coverUrl: url,
            mediaId: id,
            onUpdateMediaProgress: this.updateMediaProgress,
            onFinishMediaUploadWithSuccess: this.finishMediaUploadWithSuccess,
            onFinishMediaUploadWithFailure: this.finishMediaUploadWithFailure,
            onMediaUploadStateReset: this.mediaUploadStateReset,
            renderContent: ({
              isUploadPaused,
              isUploadInProgress,
              isUploadFailed,
              retryMessage
            }) => {
              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
                style: imageContainerStyles,
                children: [isFetchingImage && this.showLoadingIndicator(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Image, {
                  align: align && alignToFlex[align],
                  alt: alt,
                  isSelected: isSelected && !isCaptionSelected,
                  isUploadFailed: isUploadFailed,
                  isUploadPaused: isUploadPaused,
                  isUploadInProgress: isUploadInProgress,
                  shouldUseFastImage: shouldUseFastImage,
                  onSelectMediaUploadOption: this.onSelectMediaUploadOption,
                  openMediaOptions: openMediaOptions,
                  retryMessage: retryMessage,
                  url: url,
                  shapeStyle: _styles.default[className] || className,
                  width: this.getWidth(),
                  ...(hasImageContext ? additionalImageProps : {})
                })]
              });
            }
          })]
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockCaption, {
        clientId: this.props.clientId,
        isSelected: this.state.isCaptionSelected,
        accessible: !this.state.isCaptionSelected,
        accessibilityLabelCreator: this.accessibilityLabelCreator,
        onFocus: this.onFocusCaption,
        onBlur: this.props.onBlur // Always assign onBlur as props.
        ,
        insertBlocksAfter: this.props.insertBlocksAfter
      })]
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.MediaUpload, {
      allowedTypes: [_blockEditor.MEDIA_TYPE_IMAGE],
      isReplacingMedia: true,
      onSelect: this.onSelectMediaUploadOption,
      onSelectURL: this.onSelectURL,
      render: ({
        open,
        getMediaOptions
      }) => {
        return getImageComponent(open, getMediaOptions);
      }
    });
  }
}
exports.ImageEdit = ImageEdit;
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, props) => {
  const {
    getMedia
  } = select(_coreData.store);
  const {
    getSettings,
    wasBlockJustInserted
  } = select(_blockEditor.store);
  const {
    getEditedPostAttribute
  } = select('core/editor');
  const {
    attributes: {
      id,
      url
    },
    isSelected,
    clientId
  } = props;
  const {
    imageSizes,
    imageDefaultSize,
    capabilities
  } = getSettings();
  const isNotFileUrl = id && (0, _url.getProtocol)(url) !== 'file:';
  const featuredImageId = getEditedPostAttribute('featured_media');
  const shouldGetMedia = isSelected && isNotFileUrl ||
  // Edge case to update the image after uploading if the block gets unselected
  // Check if it's the original image and not the resized one with queryparams.
  !isSelected && isNotFileUrl && url && !(0, _url.hasQueryArg)(url, 'w');
  const image = shouldGetMedia ? getMedia(id) : null;
  return {
    image,
    imageSizes,
    imageDefaultSize,
    shouldUseFastImage: capabilities?.shouldUseFastImage === true,
    featuredImageId,
    wasBlockJustInserted: wasBlockJustInserted(clientId, 'inserter_menu')
  };
}), (0, _data.withDispatch)(dispatch => {
  const {
    createErrorNotice
  } = dispatch(_notices.store);
  const {
    __unstableMarkNextChangeAsNotPersistent
  } = dispatch(_blockEditor.store);
  return {
    __unstableMarkNextChangeAsNotPersistent,
    createErrorNotice,
    closeSettingsBottomSheet() {
      dispatch(_editPost.store).closeGeneralSidebar();
    }
  };
}), _compose.withPreferredColorScheme])(ImageEdit);
//# sourceMappingURL=edit.native.js.map