"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MarginVisualizer = MarginVisualizer;
exports.PaddingVisualizer = PaddingVisualizer;
var _element = require("@wordpress/element");
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _cover = _interopRequireDefault(require("../components/block-popover/cover"));
var _useBlockRefs = require("../components/block-list/use-block-props/use-block-refs");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SpacingVisualizer({
  clientId,
  value,
  computeStyle,
  forceShow
}) {
  const blockElement = (0, _useBlockRefs.__unstableUseBlockElement)(clientId);
  const [style, updateStyle] = (0, _element.useReducer)(() => computeStyle(blockElement));
  (0, _element.useLayoutEffect)(() => {
    if (!blockElement) {
      return;
    }
    // It's not sufficient to read the computed spacing value when value.spacing changes as
    // useEffect may run before the browser recomputes CSS. We therefore combine
    // useLayoutEffect and two rAF calls to ensure that we read the spacing after the current
    // paint but before the next paint.
    // See https://github.com/WordPress/gutenberg/pull/59227.
    window.requestAnimationFrame(() => window.requestAnimationFrame(updateStyle));
  }, [blockElement, value]);
  const previousValue = (0, _element.useRef)(value);
  const [isActive, setIsActive] = (0, _element.useState)(false);
  (0, _element.useEffect)(() => {
    if ((0, _isShallowEqual.default)(value, previousValue.current) || forceShow) {
      return;
    }
    setIsActive(true);
    previousValue.current = value;
    const timeout = setTimeout(() => {
      setIsActive(false);
    }, 400);
    return () => {
      setIsActive(false);
      clearTimeout(timeout);
    };
  }, [value, forceShow]);
  if (!isActive && !forceShow) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cover.default, {
    clientId: clientId,
    __unstablePopoverSlot: "block-toolbar",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor__spacing-visualizer",
      style: style
    })
  });
}
function getComputedCSS(element, property) {
  return element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue(property);
}
function MarginVisualizer({
  clientId,
  value,
  forceShow
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpacingVisualizer, {
    clientId: clientId,
    value: value?.spacing?.margin,
    computeStyle: blockElement => {
      const top = getComputedCSS(blockElement, 'margin-top');
      const right = getComputedCSS(blockElement, 'margin-right');
      const bottom = getComputedCSS(blockElement, 'margin-bottom');
      const left = getComputedCSS(blockElement, 'margin-left');
      return {
        borderTopWidth: top,
        borderRightWidth: right,
        borderBottomWidth: bottom,
        borderLeftWidth: left,
        top: top ? `-${top}` : 0,
        right: right ? `-${right}` : 0,
        bottom: bottom ? `-${bottom}` : 0,
        left: left ? `-${left}` : 0
      };
    },
    forceShow: forceShow
  });
}
function PaddingVisualizer({
  clientId,
  value,
  forceShow
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpacingVisualizer, {
    clientId: clientId,
    value: value?.spacing?.padding,
    computeStyle: blockElement => ({
      borderTopWidth: getComputedCSS(blockElement, 'padding-top'),
      borderRightWidth: getComputedCSS(blockElement, 'padding-right'),
      borderBottomWidth: getComputedCSS(blockElement, 'padding-bottom'),
      borderLeftWidth: getComputedCSS(blockElement, 'padding-left')
    }),
    forceShow: forceShow
  });
}
//# sourceMappingURL=spacing-visualizer.js.map