// packages/block-editor/src/layouts/constrained.js
import {
  __experimentalUseCustomUnits as useCustomUnits,
  __experimentalUnitControl as UnitControl,
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
  __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import {
  Icon,
  alignNone,
  stretchWide,
  justifyLeft,
  justifyCenter,
  justifyRight
} from "@wordpress/icons";
import { getCSSRules } from "@wordpress/style-engine";
import { useSettings } from "../components/use-settings";
import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from "./utils";
import { getGapCSSValue } from "../hooks/gap";
import { BlockControls, JustifyContentControl } from "../components";
import { shouldSkipSerialization } from "../hooks/utils";
import { LAYOUT_DEFINITIONS } from "./definitions";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var constrained_default = {
  name: "constrained",
  label: __("Constrained"),
  inspectorControls: function DefaultLayoutInspectorControls({
    layout,
    onChange,
    layoutBlockSupport = {}
  }) {
    const { wideSize, contentSize, justifyContent = "center" } = layout;
    const {
      allowJustification = true,
      allowCustomContentAndWideSize = true
    } = layoutBlockSupport;
    const onJustificationChange = (value) => {
      onChange({
        ...layout,
        justifyContent: value
      });
    };
    const justificationOptions = [
      {
        value: "left",
        icon: justifyLeft,
        label: __("Justify items left")
      },
      {
        value: "center",
        icon: justifyCenter,
        label: __("Justify items center")
      },
      {
        value: "right",
        icon: justifyRight,
        label: __("Justify items right")
      }
    ];
    const [availableUnits] = useSettings("spacing.units");
    const units = useCustomUnits({
      availableUnits: availableUnits || ["%", "px", "em", "rem", "vw"]
    });
    return /* @__PURE__ */ jsxs(
      VStack,
      {
        spacing: 4,
        className: "block-editor-hooks__layout-constrained",
        children: [
          allowCustomContentAndWideSize && /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(
              UnitControl,
              {
                __next40pxDefaultSize: true,
                label: __("Content width"),
                labelPosition: "top",
                value: contentSize || wideSize || "",
                onChange: (nextWidth) => {
                  nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
                  onChange({
                    ...layout,
                    contentSize: nextWidth !== "" ? nextWidth : void 0
                  });
                },
                units,
                prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: alignNone }) })
              }
            ),
            /* @__PURE__ */ jsx(
              UnitControl,
              {
                __next40pxDefaultSize: true,
                label: __("Wide width"),
                labelPosition: "top",
                value: wideSize || contentSize || "",
                onChange: (nextWidth) => {
                  nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
                  onChange({
                    ...layout,
                    wideSize: nextWidth !== "" ? nextWidth : void 0
                  });
                },
                units,
                prefix: /* @__PURE__ */ jsx(InputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ jsx(Icon, { icon: stretchWide }) })
              }
            ),
            /* @__PURE__ */ jsx("p", { className: "block-editor-hooks__layout-constrained-helptext", children: __(
              "Customize the width for all elements that are assigned to the center or wide columns."
            ) })
          ] }),
          allowJustification && /* @__PURE__ */ jsx(
            ToggleGroupControl,
            {
              __next40pxDefaultSize: true,
              __nextHasNoMarginBottom: true,
              label: __("Justification"),
              value: justifyContent,
              onChange: onJustificationChange,
              children: justificationOptions.map(
                ({ value, icon, label }) => {
                  return /* @__PURE__ */ jsx(
                    ToggleGroupControlOptionIcon,
                    {
                      value,
                      icon,
                      label
                    },
                    value
                  );
                }
              )
            }
          )
        ]
      }
    );
  },
  toolBarControls: function DefaultLayoutToolbarControls({
    layout = {},
    onChange,
    layoutBlockSupport
  }) {
    const { allowJustification = true } = layoutBlockSupport;
    if (!allowJustification) {
      return null;
    }
    return /* @__PURE__ */ jsx(BlockControls, { group: "block", __experimentalShareWithChildBlocks: true, children: /* @__PURE__ */ jsx(
      DefaultLayoutJustifyContentControl,
      {
        layout,
        onChange
      }
    ) });
  },
  getLayoutStyle: function getLayoutStyle({
    selector,
    layout = {},
    style,
    blockName,
    hasBlockGapSupport,
    layoutDefinitions = LAYOUT_DEFINITIONS
  }) {
    const { contentSize, wideSize, justifyContent } = layout;
    const blockGapStyleValue = getGapCSSValue(style?.spacing?.blockGap);
    let blockGapValue = "";
    if (!shouldSkipSerialization(blockName, "spacing", "blockGap")) {
      if (blockGapStyleValue?.top) {
        blockGapValue = getGapCSSValue(blockGapStyleValue?.top);
      } else if (typeof blockGapStyleValue === "string") {
        blockGapValue = getGapCSSValue(blockGapStyleValue);
      }
    }
    const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
    const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
    let output = !!contentSize || !!wideSize ? `
					${appendSelectors(
      selector,
      "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
    )} {
						max-width: ${contentSize ?? wideSize};
						margin-left: ${marginLeft};
						margin-right: ${marginRight};
					}
					${appendSelectors(selector, "> .alignwide")}  {
						max-width: ${wideSize ?? contentSize};
					}
					${appendSelectors(selector, "> .alignfull")} {
						max-width: none;
					}
				` : "";
    if (justifyContent === "left") {
      output += `${appendSelectors(
        selector,
        "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
      )}
			{ margin-left: ${marginLeft}; }`;
    } else if (justifyContent === "right") {
      output += `${appendSelectors(
        selector,
        "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
      )}
			{ margin-right: ${marginRight}; }`;
    }
    if (style?.spacing?.padding) {
      const paddingValues = getCSSRules(style);
      paddingValues.forEach((rule) => {
        if (rule.key === "paddingRight") {
          const paddingRightValue = rule.value === "0" ? "0px" : rule.value;
          output += `
					${appendSelectors(selector, "> .alignfull")} {
						margin-right: calc(${paddingRightValue} * -1);
					}
					`;
        } else if (rule.key === "paddingLeft") {
          const paddingLeftValue = rule.value === "0" ? "0px" : rule.value;
          output += `
					${appendSelectors(selector, "> .alignfull")} {
						margin-left: calc(${paddingLeftValue} * -1);
					}
					`;
        }
      });
    }
    if (hasBlockGapSupport && blockGapValue) {
      output += getBlockGapCSS(
        selector,
        layoutDefinitions,
        "constrained",
        blockGapValue
      );
    }
    return output;
  },
  getOrientation() {
    return "vertical";
  },
  getAlignments(layout) {
    const alignmentInfo = getAlignmentsInfo(layout);
    if (layout.alignments !== void 0) {
      if (!layout.alignments.includes("none")) {
        layout.alignments.unshift("none");
      }
      return layout.alignments.map((alignment) => ({
        name: alignment,
        info: alignmentInfo[alignment]
      }));
    }
    const { contentSize, wideSize } = layout;
    const alignments = [
      { name: "left" },
      { name: "center" },
      { name: "right" }
    ];
    if (contentSize) {
      alignments.unshift({ name: "full" });
    }
    if (wideSize) {
      alignments.unshift({ name: "wide", info: alignmentInfo.wide });
    }
    alignments.unshift({ name: "none", info: alignmentInfo.none });
    return alignments;
  }
};
var POPOVER_PROPS = {
  placement: "bottom-start"
};
function DefaultLayoutJustifyContentControl({ layout, onChange }) {
  const { justifyContent = "center" } = layout;
  const onJustificationChange = (value) => {
    onChange({
      ...layout,
      justifyContent: value
    });
  };
  const allowedControls = ["left", "center", "right"];
  return /* @__PURE__ */ jsx(
    JustifyContentControl,
    {
      allowedControls,
      value: justifyContent,
      onChange: onJustificationChange,
      popoverProps: POPOVER_PROPS
    }
  );
}
export {
  constrained_default as default
};
//# sourceMappingURL=constrained.js.map
