// packages/block-editor/src/components/block-alignment-control/ui.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
  ToolbarDropdownMenu,
  ToolbarGroup,
  MenuGroup,
  MenuItem
} from "@wordpress/components";
import useAvailableAlignments from "./use-available-alignments";
import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from "./constants";
import { Fragment, jsx } from "react/jsx-runtime";
function BlockAlignmentUI({
  value,
  onChange,
  controls,
  isToolbar,
  isCollapsed = true
}) {
  const enabledControls = useAvailableAlignments(controls);
  const hasEnabledControls = !!enabledControls.length;
  if (!hasEnabledControls) {
    return null;
  }
  function onChangeAlignment(align) {
    onChange([value, "none"].includes(align) ? void 0 : align);
  }
  const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[value];
  const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
  const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
  const commonProps = {
    icon: activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon,
    label: __("Align")
  };
  const extraProps = isToolbar ? {
    isCollapsed,
    controls: enabledControls.map(({ name: controlName }) => {
      return {
        ...BLOCK_ALIGNMENTS_CONTROLS[controlName],
        isActive: value === controlName || !value && controlName === "none",
        role: isCollapsed ? "menuitemradio" : void 0,
        onClick: () => onChangeAlignment(controlName)
      };
    })
  } : {
    toggleProps: { description: __("Change alignment") },
    children: ({ onClose }) => {
      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MenuGroup, { className: "block-editor-block-alignment-control__menu-group", children: enabledControls.map(
        ({ name: controlName, info }) => {
          const { icon, title } = BLOCK_ALIGNMENTS_CONTROLS[controlName];
          const isSelected = controlName === value || !value && controlName === "none";
          return /* @__PURE__ */ jsx(
            MenuItem,
            {
              icon,
              iconPosition: "left",
              className: clsx(
                "components-dropdown-menu__menu-item",
                {
                  "is-active": isSelected
                }
              ),
              isSelected,
              onClick: () => {
                onChangeAlignment(
                  controlName
                );
                onClose();
              },
              role: "menuitemradio",
              info,
              children: title
            },
            controlName
          );
        }
      ) }) });
    }
  };
  return /* @__PURE__ */ jsx(UIComponent, { ...commonProps, ...extraProps });
}
var ui_default = BlockAlignmentUI;
export {
  ui_default as default
};
//# sourceMappingURL=ui.js.map
