"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = PreviewWrapper;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
const normalizedWidth = 248;
const normalizedHeight = 152;

// Throttle options for useThrottle. Must be defined outside of the component,
// so that the object reference is the same on each render.
const THROTTLE_OPTIONS = {
  leading: true,
  trailing: true
};
function PreviewWrapper({
  children,
  label,
  isFocused,
  withHoverView
}) {
  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
  const [gradientValue] = useGlobalStyle('color.gradient');
  const disableMotion = (0, _compose.useReducedMotion)();
  const [isHovered, setIsHovered] = (0, _element.useState)(false);
  const [containerResizeListener, {
    width
  }] = (0, _compose.useResizeObserver)();
  const [throttledWidth, setThrottledWidthState] = (0, _element.useState)(width);
  const [ratioState, setRatioState] = (0, _element.useState)();
  const setThrottledWidth = (0, _compose.useThrottle)(setThrottledWidthState, 250, THROTTLE_OPTIONS);

  // Must use useLayoutEffect to avoid a flash of the container  at the wrong
  // size before the width is set.
  (0, _element.useLayoutEffect)(() => {
    if (width) {
      setThrottledWidth(width);
    }
  }, [width, setThrottledWidth]);

  // Must use useLayoutEffect to avoid a flash of the container at the wrong
  // size before the width is set.
  (0, _element.useLayoutEffect)(() => {
    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
    const ratioDiff = newRatio - (ratioState || 0);

    // Only update the ratio state if the difference is big enough
    // or if the ratio state is not yet set. This is to avoid an
    // endless loop of updates at particular viewport heights when the
    // presence of a scrollbar causes the width to change slightly.
    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
    if (isRatioDiffBigEnough || !ratioState) {
      setRatioState(newRatio);
    }
  }, [throttledWidth, ratioState]);

  // Set a fallbackRatio to use before the throttled ratio has been set.
  const fallbackRatio = width ? width / normalizedWidth : 1;
  /*
   * Use the throttled ratio if it has been calculated, otherwise
   * use the fallback ratio. The throttled ratio is used to avoid
   * an endless loop of updates at particular viewport heights.
   * See: https://github.com/WordPress/gutenberg/issues/55112
   */
  const ratio = ratioState ? ratioState : fallbackRatio;
  const isReady = !!width;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      style: {
        position: 'relative'
      },
      children: containerResizeListener
    }), isReady && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles-preview__wrapper",
      style: {
        height: normalizedHeight * ratio
      },
      onMouseEnter: () => setIsHovered(true),
      onMouseLeave: () => setIsHovered(false),
      tabIndex: -1,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
        style: {
          height: normalizedHeight * ratio,
          width: '100%',
          background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
          cursor: withHoverView ? 'pointer' : undefined
        },
        initial: "start",
        animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start',
        children: [].concat(children) // This makes sure children is always an array.
        .map((child, key) => child({
          ratio,
          key
        }))
      })
    })]
  });
}
//# sourceMappingURL=preview-wrapper.js.map