"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useEditorIframeProps;
var _clsx = _interopRequireDefault(require("clsx"));
var _data = require("@wordpress/data");
var _keycodes = require("@wordpress/keycodes");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _editor = require("@wordpress/editor");
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function useEditorIframeProps() {
  const {
    canvasMode,
    currentPostIsTrashed
  } = (0, _data.useSelect)(select => {
    const {
      getCanvasMode
    } = (0, _lockUnlock.unlock)(select(_store.store));
    return {
      canvasMode: getCanvasMode(),
      currentPostIsTrashed: select(_editor.store).getCurrentPostAttribute('status') === 'trash'
    };
  }, []);
  const {
    setCanvasMode
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  const [isFocused, setIsFocused] = (0, _element.useState)(false);
  (0, _element.useEffect)(() => {
    if (canvasMode === 'edit') {
      setIsFocused(false);
    }
  }, [canvasMode]);

  // In view mode, make the canvas iframe be perceived and behave as a button
  // to switch to edit mode, with a meaningful label and no title attribute.
  const viewModeIframeProps = {
    'aria-label': (0, _i18n.__)('Edit'),
    'aria-disabled': currentPostIsTrashed,
    title: null,
    role: 'button',
    tabIndex: 0,
    onFocus: () => setIsFocused(true),
    onBlur: () => setIsFocused(false),
    onKeyDown: event => {
      const {
        keyCode
      } = event;
      if ((keyCode === _keycodes.ENTER || keyCode === _keycodes.SPACE) && !currentPostIsTrashed) {
        event.preventDefault();
        setCanvasMode('edit');
      }
    },
    onClick: () => {
      setCanvasMode('edit');
    },
    onClickCapture: event => {
      if (currentPostIsTrashed) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
    readonly: true
  };
  return {
    className: (0, _clsx.default)('edit-site-visual-editor__editor-canvas', {
      'is-focused': isFocused && canvasMode === 'view'
    }),
    ...(canvasMode === 'view' ? viewModeIframeProps : {})
  };
}
//# sourceMappingURL=use-editor-iframe-props.js.map