import { jsx } from "react/jsx-runtime";
import { _ as __ } from "../../default-i18n-CN_q3KUs.js";
import { icons } from "../../icons/icons.js";
import { pascalCase, upperFirst, camelCase } from "../../utilities/es-dash.js";
import { Menu, MenuItem } from "../menu/menu.js";
import { BaseControl } from "../base-control/base-control.js";
/**
 * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
 * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`.
 *
 * @component
 * @param {Object} props - Component props.
 * @param {MatrixSize} [props.size='3x3'] - The size of the matrix. Can be either '3x3' or '2x2'.
 * @param {string} props.value - The currently selected value.
 * @param {Function} props.onChange - Function to run when the selection changes.
 * @param {string} [props.tooltip='Position'] - Tooltip text to display on the trigger button.
 * @param {string} [props.label] - Label to display.
 * @param {JSX.Element} [props.icon] - Icon to display within the button.
 * @param {string} [props.subtitle] - Subtitle to display.
 * @param {string} [props.popoverPosition='bottom'] - The position of the popover.
 * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
 *
 * @returns {JSX.Element} The MatrixAlign component.
 *
 * @typedef {'3x3' | '2x2'} MatrixSize
 * @typedef {'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' | 'top' | 'top left' | 'top right' | 'top start' | 'top end' | 'left' | 'left top' | 'left bottom' | 'start' | 'start top' | 'start bottom' | 'right' | 'right top' | 'right bottom' | 'end' | 'end top' | 'end bottom'} PopoverPosition
 *
 * @example
 * <MatrixAlign
 * 		size='3x3'
 * 		value='top left'
 * 		onChange={setAlignment}
 * />
 *
 * @preserve
 */
const MatrixAlign = (props) => {
  const {
    size = "3x3",
    value,
    onChange,
    tooltip = __("Position", "eightshift-ui-components"),
    label,
    icon,
    subtitle,
    "aria-label": ariaLabel,
    hidden
  } = props;
  if (hidden) {
    return null;
  }
  const allSizeOptions = [
    {
      value: "top left",
      label: __("Top-left", "eightshift-ui-components"),
      availableOn: ["3x3", "2x2"]
    },
    {
      value: "top center",
      label: __("Top-center", "eightshift-ui-components"),
      availableOn: ["3x3"]
    },
    {
      value: "top right",
      label: __("Top-right", "eightshift-ui-components"),
      availableOn: ["3x3", "2x2"]
    },
    {
      value: "center left",
      label: __("Center-left", "eightshift-ui-components"),
      availableOn: ["3x3"]
    },
    {
      value: "center center",
      label: __("Center", "eightshift-ui-components"),
      availableOn: ["3x3"]
    },
    {
      value: "center right",
      label: __("Center-right", "eightshift-ui-components"),
      availableOn: ["3x3"]
    },
    {
      value: "bottom left",
      label: __("Bottom-left", "eightshift-ui-components"),
      availableOn: ["3x3", "2x2"]
    },
    {
      value: "bottom center",
      label: __("Bottom-center", "eightshift-ui-components"),
      availableOn: ["3x3"]
    },
    {
      value: "bottom right",
      label: __("Bottom-right", "eightshift-ui-components"),
      availableOn: ["3x3", "2x2"]
    }
  ];
  const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size));
  return /* @__PURE__ */ jsx(
    BaseControl,
    {
      icon,
      label,
      subtitle,
      inline: true,
      children: /* @__PURE__ */ jsx(
        Menu,
        {
          triggerIcon: icons[`position${size}${upperFirst(camelCase(value))}`],
          triggerProps: { "aria-label": ariaLabel },
          tooltip,
          keepOpen: true,
          children: sizeOptions.map(({ value: itemValue, label: label2 }) => /* @__PURE__ */ jsx(
            MenuItem,
            {
              endIcon: icons?.[`position${size}${pascalCase(itemValue)}`],
              selected: value === itemValue,
              onClick: () => onChange(itemValue),
              children: label2
            },
            itemValue
          ))
        }
      )
    }
  );
};
export {
  MatrixAlign
};
