"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ZoomOutSeparator = ZoomOutSeparator;
var _clsx = _interopRequireDefault(require("clsx"));
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ZoomOutSeparator({
  clientId,
  rootClientId = '',
  position = 'top'
}) {
  const [isDraggedOver, setIsDraggedOver] = (0, _element.useState)(false);
  const {
    sectionRootClientId,
    sectionClientIds,
    blockInsertionPoint,
    blockInsertionPointVisible
  } = (0, _data.useSelect)(select => {
    const {
      getBlockInsertionPoint,
      getBlockOrder,
      isBlockInsertionPointVisible,
      getSectionRootClientId
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const root = getSectionRootClientId();
    const sectionRootClientIds = getBlockOrder(root);
    return {
      sectionRootClientId: root,
      sectionClientIds: sectionRootClientIds,
      blockOrder: getBlockOrder(root),
      blockInsertionPoint: getBlockInsertionPoint(),
      blockInsertionPointVisible: isBlockInsertionPointVisible()
    };
  }, []);
  const isReducedMotion = (0, _compose.useReducedMotion)();
  if (!clientId) {
    return;
  }
  let isVisible = false;
  const isSectionBlock = rootClientId === sectionRootClientId && sectionClientIds && sectionClientIds.includes(clientId);
  if (!isSectionBlock) {
    return null;
  }
  if (position === 'top') {
    isVisible = blockInsertionPointVisible && blockInsertionPoint.index === 0 && clientId === sectionClientIds[blockInsertionPoint.index];
  }
  if (position === 'bottom') {
    isVisible = blockInsertionPointVisible && clientId === sectionClientIds[blockInsertionPoint.index - 1];
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
    children: isVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
      initial: {
        height: 0
      },
      animate: {
        // Use a height equal to that of the zoom out frame size.
        height: 'calc(1.5 * var(--wp-block-editor-iframe-zoom-out-frame-size) / var(--wp-block-editor-iframe-zoom-out-scale)'
      },
      exit: {
        height: 0
      },
      transition: {
        type: 'tween',
        duration: isReducedMotion ? 0 : 0.2,
        ease: [0.6, 0, 0.4, 1]
      },
      className: (0, _clsx.default)('block-editor-block-list__zoom-out-separator', {
        'is-dragged-over': isDraggedOver
      }),
      "data-is-insertion-point": "true",
      onDragOver: () => setIsDraggedOver(true),
      onDragLeave: () => setIsDraggedOver(false),
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
        initial: {
          opacity: 0
        },
        animate: {
          opacity: 1
        },
        exit: {
          opacity: 0,
          transition: {
            delay: -0.125
          }
        },
        transition: {
          ease: 'linear',
          duration: 0.1,
          delay: 0.125
        },
        children: (0, _i18n.__)('Drop pattern.')
      })
    })
  });
}
//# sourceMappingURL=zoom-out-separator.js.map