// packages/block-editor/src/components/dimensions-tool/index.js
import { useState } from "@wordpress/element";
import AspectRatioTool from "./aspect-ratio-tool.mjs";
import ScaleTool from "./scale-tool.mjs";
import WidthHeightTool from "./width-height-tool.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function DimensionsTool({
  panelId,
  value = {},
  onChange = () => {
  },
  aspectRatioOptions,
  // Default options handled by AspectRatioTool.
  defaultAspectRatio = "auto",
  // Match CSS default value for aspect-ratio.
  scaleOptions,
  // Default options handled by ScaleTool.
  defaultScale = "cover",
  unitsOptions,
  // Default options handled by UnitControl.
  tools = ["aspectRatio", "widthHeight", "scale"]
}) {
  const width = value.width === void 0 || value.width === "auto" ? null : value.width;
  const height = value.height === void 0 || value.height === "auto" ? null : value.height;
  const aspectRatio = value.aspectRatio === void 0 || value.aspectRatio === "auto" ? null : value.aspectRatio;
  const scale = value.scale === void 0 ? null : value.scale;
  const [lastScale, setLastScale] = useState(scale);
  const [lastAspectRatio, setLastAspectRatio] = useState(aspectRatio);
  const hasCustomAspectRatio = !!(width && height);
  const aspectRatioValue = hasCustomAspectRatio ? "custom" : aspectRatio;
  const showScaleControl = aspectRatio || width && height;
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    tools.includes("aspectRatio") && /* @__PURE__ */ jsx(
      AspectRatioTool,
      {
        panelId,
        options: aspectRatioOptions,
        defaultValue: defaultAspectRatio,
        value: aspectRatioValue,
        onChange: (nextAspectRatio) => {
          const nextValue = { ...value };
          nextAspectRatio = nextAspectRatio === "auto" ? null : nextAspectRatio;
          setLastAspectRatio(nextAspectRatio);
          if (!nextAspectRatio) {
            delete nextValue.aspectRatio;
          } else {
            nextValue.aspectRatio = nextAspectRatio;
          }
          if (!nextAspectRatio) {
            delete nextValue.scale;
          } else if (lastScale) {
            nextValue.scale = lastScale;
          } else {
            nextValue.scale = defaultScale;
            setLastScale(defaultScale);
          }
          if ("custom" !== nextAspectRatio && width && height) {
            delete nextValue.height;
          }
          onChange(nextValue);
        }
      }
    ),
    tools.includes("widthHeight") && /* @__PURE__ */ jsx(
      WidthHeightTool,
      {
        panelId,
        units: unitsOptions,
        value: { width, height },
        onChange: ({ width: nextWidth, height: nextHeight }) => {
          const nextValue = { ...value };
          nextWidth = nextWidth === "auto" ? null : nextWidth;
          nextHeight = nextHeight === "auto" ? null : nextHeight;
          if (!nextWidth) {
            delete nextValue.width;
          } else {
            nextValue.width = nextWidth;
          }
          if (!nextHeight) {
            delete nextValue.height;
          } else {
            nextValue.height = nextHeight;
          }
          if (nextWidth && nextHeight) {
            delete nextValue.aspectRatio;
          } else if (lastAspectRatio) {
            nextValue.aspectRatio = lastAspectRatio;
          } else {
          }
          if (!lastAspectRatio && !!nextWidth !== !!nextHeight) {
            delete nextValue.scale;
          } else if (lastScale) {
            nextValue.scale = lastScale;
          } else {
            nextValue.scale = defaultScale;
            setLastScale(defaultScale);
          }
          onChange(nextValue);
        }
      }
    ),
    tools.includes("scale") && showScaleControl && /* @__PURE__ */ jsx(
      ScaleTool,
      {
        panelId,
        options: scaleOptions,
        defaultValue: defaultScale,
        value: lastScale,
        onChange: (nextScale) => {
          const nextValue = { ...value };
          setLastScale(nextScale);
          if (!nextScale) {
            delete nextValue.scale;
          } else {
            nextValue.scale = nextScale;
          }
          onChange(nextValue);
        }
      }
    )
  ] });
}
var dimensions_tool_default = DimensionsTool;
export {
  dimensions_tool_default as default
};
//# sourceMappingURL=index.mjs.map
