import { jsx } from "react/jsx-runtime";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import { useMemo } from "@wordpress/element";
import { unlock } from "../../lock-unlock";
const {
  useGlobalStyle,
  useGlobalSetting,
  useSettingsForBlockElement,
  DimensionsPanel: StylesDimensionsPanel
} = unlock(blockEditorPrivateApis);
const DEFAULT_CONTROLS = {
  contentSize: true,
  wideSize: true,
  padding: true,
  margin: true,
  blockGap: true,
  minHeight: true,
  childLayout: false
};
function DimensionsPanel() {
  const [style] = useGlobalStyle("", void 0, "user", {
    shouldDecodeEncode: false
  });
  const [inheritedStyle, setStyle] = useGlobalStyle("", void 0, "all", {
    shouldDecodeEncode: false
  });
  const [userSettings] = useGlobalSetting("", void 0, "user");
  const [rawSettings, setSettings] = useGlobalSetting("");
  const settings = useSettingsForBlockElement(rawSettings);
  const inheritedStyleWithLayout = useMemo(() => {
    return {
      ...inheritedStyle,
      layout: settings.layout
    };
  }, [inheritedStyle, settings.layout]);
  const styleWithLayout = useMemo(() => {
    return {
      ...style,
      layout: userSettings.layout
    };
  }, [style, userSettings.layout]);
  const onChange = (newStyle) => {
    const updatedStyle = { ...newStyle };
    delete updatedStyle.layout;
    setStyle(updatedStyle);
    if (newStyle.layout !== userSettings.layout) {
      const updatedSettings = {
        ...userSettings,
        layout: newStyle.layout
      };
      if (updatedSettings.layout?.definitions) {
        delete updatedSettings.layout.definitions;
      }
      setSettings(updatedSettings);
    }
  };
  return /* @__PURE__ */ jsx(
    StylesDimensionsPanel,
    {
      inheritedValue: inheritedStyleWithLayout,
      value: styleWithLayout,
      onChange,
      settings,
      includeLayoutControls: true,
      defaultControls: DEFAULT_CONTROLS
    }
  );
}
export {
  DimensionsPanel as default
};
//# sourceMappingURL=dimensions-panel.js.map
