// packages/block-library/src/navigation/edit/overlay-menu-preview.js
import {
  ToggleControl,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import OverlayMenuIcon from "./overlay-menu-icon";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function OverlayMenuPreview({ setAttributes, hasIcon, icon }) {
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Show icon button"),
        isShownByDefault: true,
        hasValue: () => !hasIcon,
        onDeselect: () => setAttributes({ hasIcon: true }),
        children: /* @__PURE__ */ jsx(
          ToggleControl,
          {
            __nextHasNoMarginBottom: true,
            label: __("Show icon button"),
            help: __(
              "Configure the visual appearance of the button that toggles the overlay menu."
            ),
            onChange: (value) => setAttributes({ hasIcon: value }),
            checked: hasIcon
          }
        )
      }
    ),
    /* @__PURE__ */ jsx(
      ToolsPanelItem,
      {
        label: __("Icon"),
        isShownByDefault: true,
        hasValue: () => icon !== "handle",
        onDeselect: () => setAttributes({ icon: "handle" }),
        children: /* @__PURE__ */ jsxs(
          ToggleGroupControl,
          {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            className: "wp-block-navigation__overlay-menu-icon-toggle-group",
            label: __("Icon"),
            value: icon,
            onChange: (value) => setAttributes({ icon: value }),
            isBlock: true,
            children: [
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: "handle",
                  "aria-label": __("handle"),
                  label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "handle" })
                }
              ),
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: "menu",
                  "aria-label": __("menu"),
                  label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "menu" })
                }
              )
            ]
          }
        )
      }
    )
  ] });
}
export {
  OverlayMenuPreview as default
};
//# sourceMappingURL=overlay-menu-preview.js.map
