// packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
import {
  SelectControl,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useSettings } from "../use-settings";
import { jsx } from "react/jsx-runtime";
function AspectRatioTool({
  panelId,
  value,
  onChange = () => {
  },
  options,
  defaultValue = "auto",
  hasValue,
  isShownByDefault = true
}) {
  const displayValue = value ?? "auto";
  const [defaultRatios, themeRatios, showDefaultRatios] = useSettings(
    "dimensions.aspectRatios.default",
    "dimensions.aspectRatios.theme",
    "dimensions.defaultAspectRatios"
  );
  const themeOptions = themeRatios?.map(({ name, ratio }) => ({
    label: name,
    value: ratio
  }));
  const defaultOptions = defaultRatios?.map(({ name, ratio }) => ({
    label: name,
    value: ratio
  }));
  const aspectRatioOptions = [
    {
      label: _x(
        "Original",
        "Aspect ratio option for dimensions control"
      ),
      value: "auto"
    },
    ...showDefaultRatios ? defaultOptions : [],
    ...themeOptions ? themeOptions : [],
    {
      label: _x("Custom", "Aspect ratio option for dimensions control"),
      value: "custom",
      disabled: true,
      hidden: true
    }
  ];
  return /* @__PURE__ */ jsx(
    ToolsPanelItem,
    {
      hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
      label: __("Aspect ratio"),
      onDeselect: () => onChange(void 0),
      isShownByDefault,
      panelId,
      children: /* @__PURE__ */ jsx(
        SelectControl,
        {
          label: __("Aspect ratio"),
          value: displayValue,
          options: options ?? aspectRatioOptions,
          onChange,
          size: "__unstable-large",
          __nextHasNoMarginBottom: true
        }
      )
    }
  );
}
export {
  AspectRatioTool as default
};
//# sourceMappingURL=aspect-ratio-tool.js.map
