// packages/block-editor/src/components/dimensions-tool/scale-tool.js
import {
  __experimentalToolsPanelItem as ToolsPanelItem,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption
} from "@wordpress/components";
import { useMemo } from "@wordpress/element";
import { __, _x } from "@wordpress/i18n";
import { jsx } from "react/jsx-runtime";
var DEFAULT_SCALE_OPTIONS = [
  {
    value: "fill",
    label: _x("Fill", "Scale option for dimensions control"),
    help: __("Fill the space by stretching the content.")
  },
  {
    value: "contain",
    label: _x("Contain", "Scale option for dimensions control"),
    help: __("Fit the content to the space without clipping.")
  },
  {
    value: "cover",
    label: _x("Cover", "Scale option for dimensions control"),
    help: __("Fill the space by clipping what doesn't fit.")
  },
  {
    value: "none",
    label: _x("None", "Scale option for dimensions control"),
    help: __(
      "Do not adjust the sizing of the content. Content that is too large will be clipped, and content that is too small will have additional padding."
    )
  },
  {
    value: "scale-down",
    label: _x("Scale down", "Scale option for dimensions control"),
    help: __(
      "Scale down the content to fit the space if it is too big. Content that is too small will have additional padding."
    )
  }
];
function ScaleTool({
  panelId,
  value,
  onChange,
  options = DEFAULT_SCALE_OPTIONS,
  defaultValue = DEFAULT_SCALE_OPTIONS[0].value,
  isShownByDefault = true
}) {
  const displayValue = value ?? "fill";
  const scaleHelp = useMemo(() => {
    return options.reduce((acc, option) => {
      acc[option.value] = option.help;
      return acc;
    }, {});
  }, [options]);
  return /* @__PURE__ */ jsx(
    ToolsPanelItem,
    {
      label: _x("Scale", "Image scaling options"),
      isShownByDefault,
      hasValue: () => displayValue !== defaultValue,
      onDeselect: () => onChange(defaultValue),
      panelId,
      children: /* @__PURE__ */ jsx(
        ToggleGroupControl,
        {
          label: _x("Scale", "Image scaling options"),
          isBlock: true,
          help: scaleHelp[displayValue],
          value: displayValue,
          onChange,
          size: "__unstable-large",
          children: options.map((option) => /* @__PURE__ */ jsx(
            ToggleGroupControlOption,
            {
              ...option
            },
            option.value
          ))
        }
      )
    }
  );
}
export {
  ScaleTool as default
};
//# sourceMappingURL=scale-tool.mjs.map
