"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/use-resize-canvas/index.js
var use_resize_canvas_exports = {};
__export(use_resize_canvas_exports, {
  default: () => useResizeCanvas
});
module.exports = __toCommonJS(use_resize_canvas_exports);
var import_element = require("@wordpress/element");
function useResizeCanvas(deviceType) {
  const [actualWidth, updateActualWidth] = (0, import_element.useState)(window.innerWidth);
  (0, import_element.useEffect)(() => {
    if (deviceType === "Desktop") {
      return;
    }
    const resizeListener = () => updateActualWidth(window.innerWidth);
    window.addEventListener("resize", resizeListener);
    return () => {
      window.removeEventListener("resize", resizeListener);
    };
  }, [deviceType]);
  const getCanvasWidth = (device) => {
    let deviceWidth;
    switch (device) {
      case "Tablet":
        deviceWidth = 780;
        break;
      case "Mobile":
        deviceWidth = 360;
        break;
      default:
        return null;
    }
    return deviceWidth < actualWidth ? deviceWidth : actualWidth;
  };
  const contentInlineStyles = (device) => {
    const height = device === "Mobile" ? "768px" : "1024px";
    const marginVertical = "40px";
    const marginHorizontal = "auto";
    switch (device) {
      case "Tablet":
      case "Mobile":
        return {
          width: getCanvasWidth(device),
          // Keeping margin styles separate to avoid warnings
          // when those props get overridden in the iframe component
          marginTop: marginVertical,
          marginBottom: marginVertical,
          marginLeft: marginHorizontal,
          marginRight: marginHorizontal,
          height,
          overflowY: "auto"
        };
      default:
        return {
          marginLeft: marginHorizontal,
          marginRight: marginHorizontal
        };
    }
  };
  return contentInlineStyles(deviceType);
}
//# sourceMappingURL=index.js.map
