"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.UnsupportedBlockEdit = void 0;
var _element = require("@wordpress/element");
var _reactNative = require("react-native");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockLibrary = require("@wordpress/block-library");
var _blocks = require("@wordpress/blocks");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _hooks = require("@wordpress/hooks");
var _blockEditor = require("@wordpress/block-editor");
var _style = _interopRequireDefault(require("./style.scss"));
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Blocks that can't be edited through the Unsupported block editor identified by their name.
const UBE_INCOMPATIBLE_BLOCKS = ['core/block'];
const I18N_BLOCK_SCHEMA_TITLE = 'block title';
class UnsupportedBlockEdit extends _element.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHelp: false
    };
    this.toggleSheet = this.toggleSheet.bind(this);
    this.closeSheet = this.closeSheet.bind(this);
    this.requestFallback = this.requestFallback.bind(this);
    this.onHelpButtonPressed = this.onHelpButtonPressed.bind(this);
  }
  toggleSheet() {
    this.setState({
      showHelp: !this.state.showHelp
    });
  }
  closeSheet() {
    this.setState({
      showHelp: false
    });
  }
  componentWillUnmount() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  }
  getTitle() {
    const {
      originalName
    } = this.props.attributes;
    const blockType = _blockLibrary.coreBlocks[originalName];
    const title = blockType?.metadata.title;
    const textdomain = blockType?.metadata.textdomain;
    return title && textdomain ?
    // eslint-disable-next-line @wordpress/i18n-no-variables, @wordpress/i18n-text-domain
    (0, _i18n._x)(title, I18N_BLOCK_SCHEMA_TITLE, textdomain) : originalName;
  }
  renderHelpIcon() {
    const infoIconStyle = this.props.getStylesFromColorScheme(_style.default.infoIcon, _style.default.infoIconDark);
    return (0, _element.createElement)(_reactNative.TouchableOpacity, {
      onPress: this.onHelpButtonPressed,
      style: _style.default.helpIconContainer,
      accessibilityLabel: (0, _i18n.__)('Help button'),
      accessibilityRole: 'button',
      accessibilityHint: (0, _i18n.__)('Tap here to show help')
    }, (0, _element.createElement)(_components.Icon, {
      className: "unsupported-icon-help",
      label: (0, _i18n.__)('Help icon'),
      icon: _icons.help,
      fill: infoIconStyle.color
    }));
  }
  onHelpButtonPressed() {
    if (!this.props.isSelected) {
      this.props.selectBlock();
    }
    this.toggleSheet();
  }
  requestFallback() {
    if (this.props.canEnableUnsupportedBlockEditor && this.props.isUnsupportedBlockEditorSupported === false) {
      this.toggleSheet();
      this.setState({
        sendButtonPressMessage: true
      });
    } else {
      this.toggleSheet();
      this.setState({
        sendFallbackMessage: true
      });
    }
  }
  renderSheet(blockTitle, blockName) {
    const {
      getStylesFromColorScheme,
      attributes,
      clientId,
      isUnsupportedBlockEditorSupported,
      canEnableUnsupportedBlockEditor,
      isEditableInUnsupportedBlockEditor
    } = this.props;
    const infoTextStyle = getStylesFromColorScheme(_style.default.infoText, _style.default.infoTextDark);
    const infoTitleStyle = getStylesFromColorScheme(_style.default.infoTitle, _style.default.infoTitleDark);
    const infoDescriptionStyle = getStylesFromColorScheme(_style.default.infoDescription, _style.default.infoDescriptionDark);
    const infoSheetIconStyle = getStylesFromColorScheme(_style.default.infoSheetIcon, _style.default.infoSheetIconDark);

    /* translators: Missing block alert title. %s: The localized block name */
    const titleFormat = (0, _i18n.__)("'%s' is not fully-supported");
    const infoTitle = (0, _i18n.sprintf)(titleFormat, blockTitle);
    const missingBlockDetail = (0, _hooks.applyFilters)('native.missing_block_detail', (0, _i18n.__)('We are working hard to add more blocks with each release.'), blockName);
    const missingBlockActionButton = (0, _hooks.applyFilters)('native.missing_block_action_button', (0, _i18n.__)('Edit using web editor'));
    const actionButtonStyle = getStylesFromColorScheme(_style.default.actionButton, _style.default.actionButtonDark);
    return (0, _element.createElement)(_components.BottomSheet, {
      isVisible: this.state.showHelp,
      hideHeader: true,
      onClose: this.closeSheet,
      onModalHide: () => {
        if (this.state.sendFallbackMessage) {
          // On iOS, onModalHide is called when the controller is still part of the hierarchy.
          // A small delay will ensure that the controller has already been removed.
          this.timeout = setTimeout(() => {
            // For the Classic block, the content is kept in the `content` attribute.
            const content = blockName === 'core/freeform' ? attributes.content : attributes.originalContent;
            (0, _reactNativeBridge.requestUnsupportedBlockFallback)(content, clientId, blockName, blockTitle);
          }, 100);
          this.setState({
            sendFallbackMessage: false
          });
        } else if (this.state.sendButtonPressMessage) {
          this.timeout = setTimeout(() => {
            (0, _reactNativeBridge.sendActionButtonPressedAction)(_reactNativeBridge.actionButtons.missingBlockAlertActionButton);
          }, 100);
          this.setState({
            sendButtonPressMessage: false
          });
        }
      }
    }, (0, _element.createElement)(_reactNative.View, {
      style: _style.default.infoContainer
    }, (0, _element.createElement)(_components.Icon, {
      icon: _icons.help,
      color: infoSheetIconStyle.color,
      size: _style.default.infoSheetIcon.size
    }), (0, _element.createElement)(_reactNative.Text, {
      style: [infoTextStyle, infoTitleStyle]
    }, infoTitle), isEditableInUnsupportedBlockEditor && missingBlockDetail && (0, _element.createElement)(_reactNative.Text, {
      style: [infoTextStyle, infoDescriptionStyle]
    }, missingBlockDetail)), (isUnsupportedBlockEditorSupported || canEnableUnsupportedBlockEditor) && isEditableInUnsupportedBlockEditor && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.TextControl, {
      label: missingBlockActionButton,
      separatorType: "topFullWidth",
      onPress: this.requestFallback,
      labelStyle: actionButtonStyle
    }), (0, _element.createElement)(_components.TextControl, {
      label: (0, _i18n.__)('Dismiss'),
      separatorType: "topFullWidth",
      onPress: this.toggleSheet,
      labelStyle: actionButtonStyle
    })));
  }
  render() {
    const {
      originalName
    } = this.props.attributes;
    const {
      getStylesFromColorScheme,
      preferredColorScheme
    } = this.props;
    const blockType = _blockLibrary.coreBlocks[originalName];
    const title = this.getTitle();
    const titleStyle = getStylesFromColorScheme(_style.default.unsupportedBlockMessage, _style.default.unsupportedBlockMessageDark);
    const subTitleStyle = getStylesFromColorScheme(_style.default.unsupportedBlockSubtitle, _style.default.unsupportedBlockSubtitleDark);
    const subtitle = (0, _element.createElement)(_reactNative.Text, {
      style: subTitleStyle
    }, (0, _i18n.__)('Unsupported'));
    const icon = blockType ? (0, _blocks.normalizeIconObject)(blockType.settings.icon) : _icons.plugins;
    const iconStyle = getStylesFromColorScheme(_style.default.unsupportedBlockIcon, _style.default.unsupportedBlockIconDark);
    const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
    return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
      disabled: !this.props.isSelected,
      accessibilityLabel: (0, _i18n.__)('Help button'),
      accessibilityRole: 'button',
      accessibilityHint: (0, _i18n.__)('Tap here to show help'),
      onPress: this.toggleSheet
    }, (0, _element.createElement)(_reactNative.View, {
      style: getStylesFromColorScheme(_style.default.unsupportedBlock, _style.default.unsupportedBlockDark)
    }, this.renderHelpIcon(), (0, _element.createElement)(_reactNative.View, {
      style: _style.default.unsupportedBlockHeader
    }, (0, _element.createElement)(_components.Icon, {
      className: iconClassName,
      icon: icon && icon.src ? icon.src : icon,
      fill: iconStyle.color
    }), (0, _element.createElement)(_reactNative.Text, {
      style: titleStyle
    }, title)), subtitle, this.renderSheet(title, originalName)));
  }
}
exports.UnsupportedBlockEdit = UnsupportedBlockEdit;
var _default = (0, _compose.compose)([(0, _data.withSelect)((select, {
  attributes
}) => {
  const {
    capabilities
  } = select(_blockEditor.store).getSettings();
  return {
    isUnsupportedBlockEditorSupported: capabilities?.unsupportedBlockEditor === true,
    canEnableUnsupportedBlockEditor: capabilities?.canEnableUnsupportedBlockEditor === true,
    isEditableInUnsupportedBlockEditor: !UBE_INCOMPATIBLE_BLOCKS.includes(attributes.originalName)
  };
}), (0, _data.withDispatch)((dispatch, ownProps) => {
  const {
    selectBlock
  } = dispatch(_blockEditor.store);
  return {
    selectBlock() {
      selectBlock(ownProps.clientId);
    }
  };
}), _compose.withPreferredColorScheme])(UnsupportedBlockEdit);
exports.default = _default;
//# sourceMappingURL=edit.native.js.map