// packages/block-editor/src/components/global-styles/image-settings-panel.js
import {
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem,
  ToggleControl
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useToolsPanelDropdownMenuProps } from "./utils";
import { Fragment, jsx } from "react/jsx-runtime";
function useHasImageSettingsPanel(name, value, inheritedValue) {
  return name === "core/image" && inheritedValue?.lightbox?.allowEditing || !!value?.lightbox;
}
function ImageSettingsPanel({
  onChange,
  value,
  inheritedValue,
  panelId
}) {
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const resetLightbox = () => {
    onChange(void 0);
  };
  const onChangeLightbox = (newSetting) => {
    onChange({
      enabled: newSetting
    });
  };
  let lightboxChecked = false;
  if (inheritedValue?.lightbox?.enabled) {
    lightboxChecked = inheritedValue.lightbox.enabled;
  }
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
    ToolsPanel,
    {
      label: _x("Settings", "Image settings"),
      resetAll: resetLightbox,
      panelId,
      dropdownMenuProps,
      children: /* @__PURE__ */ jsx(
        ToolsPanelItem,
        {
          hasValue: () => !!value?.lightbox,
          label: __("Enlarge on click"),
          onDeselect: resetLightbox,
          isShownByDefault: true,
          panelId,
          children: /* @__PURE__ */ jsx(
            ToggleControl,
            {
              __nextHasNoMarginBottom: true,
              label: __("Enlarge on click"),
              checked: lightboxChecked,
              onChange: onChangeLightbox
            }
          )
        }
      )
    }
  ) });
}
export {
  ImageSettingsPanel as default,
  useHasImageSettingsPanel
};
//# sourceMappingURL=image-settings-panel.js.map
