// packages/block-editor/src/components/responsive-block-control/index.js
import clsx from "clsx";
import { __, _x, sprintf } from "@wordpress/i18n";
import { Fragment } from "@wordpress/element";
import { ToggleControl } from "@wordpress/components";
import ResponsiveBlockControlLabel from "./label";
import { jsx, jsxs } from "react/jsx-runtime";
function ResponsiveBlockControl(props) {
  const {
    title,
    property,
    toggleLabel,
    onIsResponsiveChange,
    renderDefaultControl,
    renderResponsiveControls,
    isResponsive = false,
    defaultLabel = {
      id: "all",
      label: _x("All", "screen sizes")
    },
    viewports = [
      {
        id: "small",
        label: __("Small screens")
      },
      {
        id: "medium",
        label: __("Medium screens")
      },
      {
        id: "large",
        label: __("Large screens")
      }
    ]
  } = props;
  if (!title || !property || !renderDefaultControl) {
    return null;
  }
  const toggleControlLabel = toggleLabel || sprintf(
    /* translators: %s: Property value for the control (eg: margin, padding, etc.). */
    __("Use the same %s on all screen sizes."),
    property
  );
  const toggleHelpText = __(
    "Choose whether to use the same value for all screen sizes or a unique value for each screen size."
  );
  const defaultControl = renderDefaultControl(
    /* @__PURE__ */ jsx(
      ResponsiveBlockControlLabel,
      {
        property,
        viewport: defaultLabel
      }
    ),
    defaultLabel
  );
  const defaultResponsiveControls = () => {
    return viewports.map((viewport) => /* @__PURE__ */ jsx(Fragment, { children: renderDefaultControl(
      /* @__PURE__ */ jsx(
        ResponsiveBlockControlLabel,
        {
          property,
          viewport
        }
      ),
      viewport
    ) }, viewport.id));
  };
  return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-responsive-block-control", children: [
    /* @__PURE__ */ jsx("legend", { className: "block-editor-responsive-block-control__title", children: title }),
    /* @__PURE__ */ jsxs("div", { className: "block-editor-responsive-block-control__inner", children: [
      /* @__PURE__ */ jsx(
        ToggleControl,
        {
          __nextHasNoMarginBottom: true,
          className: "block-editor-responsive-block-control__toggle",
          label: toggleControlLabel,
          checked: !isResponsive,
          onChange: onIsResponsiveChange,
          help: toggleHelpText
        }
      ),
      /* @__PURE__ */ jsxs(
        "div",
        {
          className: clsx(
            "block-editor-responsive-block-control__group",
            {
              "is-responsive": isResponsive
            }
          ),
          children: [
            !isResponsive && defaultControl,
            isResponsive && (renderResponsiveControls ? renderResponsiveControls(viewports) : defaultResponsiveControls())
          ]
        }
      )
    ] })
  ] });
}
var responsive_block_control_default = ResponsiveBlockControl;
export {
  responsive_block_control_default as default
};
//# sourceMappingURL=index.js.map
