"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = CanvasLoader;
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _coreData = require("@wordpress/core-data");
var _data = require("@wordpress/data");
var _lockUnlock = require("../../lock-unlock");
var _hooks = require("../global-styles/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  Theme
} = (0, _lockUnlock.unlock)(_components.privateApis);
const {
  useGlobalStyle
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function CanvasLoader({
  id
}) {
  var _highlightedColors$0$;
  const [fallbackIndicatorColor] = useGlobalStyle('color.text');
  const [backgroundColor] = useGlobalStyle('color.background');
  const {
    highlightedColors
  } = (0, _hooks.useStylesPreviewColors)();
  const indicatorColor = (_highlightedColors$0$ = highlightedColors[0]?.color) !== null && _highlightedColors$0$ !== void 0 ? _highlightedColors$0$ : fallbackIndicatorColor;
  const {
    elapsed,
    total
  } = (0, _data.useSelect)(select => {
    var _selectorsByStatus$re, _selectorsByStatus$fi;
    const selectorsByStatus = select(_coreData.store).countSelectorsByStatus();
    const resolving = (_selectorsByStatus$re = selectorsByStatus.resolving) !== null && _selectorsByStatus$re !== void 0 ? _selectorsByStatus$re : 0;
    const finished = (_selectorsByStatus$fi = selectorsByStatus.finished) !== null && _selectorsByStatus$fi !== void 0 ? _selectorsByStatus$fi : 0;
    return {
      elapsed: finished,
      total: finished + resolving
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "edit-site-canvas-loader",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Theme, {
      accent: indicatorColor,
      background: backgroundColor,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ProgressBar, {
        id: id,
        max: total,
        value: elapsed
      })
    })
  });
}
//# sourceMappingURL=index.js.map