// packages/block-editor/src/components/child-layout-control/index.js
import {
  __experimentalToggleGroupControl as ToggleGroupControl,
  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
  __experimentalUnitControl as UnitControl,
  __experimentalInputControl as InputControl,
  __experimentalVStack as VStack,
  __experimentalToolsPanelItem as ToolsPanelItem,
  __experimentalUseCustomUnits as useCustomUnits,
  Flex,
  FlexItem
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useEffect } from "@wordpress/element";
import { useSelect, useDispatch } from "@wordpress/data";
import { useGetNumberOfBlocksBeforeCell } from "../grid/use-get-number-of-blocks-before-cell.mjs";
import { store as blockEditorStore } from "../../store/index.mjs";
import { useSettings } from "../use-settings/index.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var FLEX_CHILD_LAYOUT_VALUES = {
  fit: "fit",
  grow: "fill",
  max: "fixed",
  fixed: "fixedNoShrink"
};
var FLEX_SIZE_VALUES = [
  FLEX_CHILD_LAYOUT_VALUES.max,
  FLEX_CHILD_LAYOUT_VALUES.fixed
];
function isFlexSizeValue(value) {
  return FLEX_SIZE_VALUES.includes(value);
}
function maxSizeLabel(parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  return orientation === "horizontal" ? _x("Max", "Block with maximum width in flex layout") : _x("Max", "Block with maximum height in flex layout");
}
function helpText(flexControlValue, parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.grow) {
    return __("Stretch to fill available space.");
  }
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max && orientation === "horizontal") {
    return __("Specify a maximum width.");
  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.max) {
    return __("Specify a maximum height.");
  }
  if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed && orientation === "horizontal") {
    return __("Specify a fixed width.");
  } else if (flexControlValue === FLEX_CHILD_LAYOUT_VALUES.fixed) {
    return __("Specify a fixed height.");
  }
  return __("Fit contents.");
}
function ChildLayoutControl({
  value: childLayout = {},
  onChange,
  parentLayout,
  isShownByDefault,
  panelId,
  showGridSpanDefaults = true
}) {
  const {
    type: parentType,
    default: { type: defaultParentType = "default" } = {}
  } = parentLayout ?? {};
  const parentLayoutType = parentType || defaultParentType;
  if (parentLayoutType === "flex") {
    return /* @__PURE__ */ jsx(
      FlexControls,
      {
        childLayout,
        onChange,
        parentLayout,
        isShownByDefault,
        panelId
      }
    );
  } else if (parentLayoutType === "grid") {
    return /* @__PURE__ */ jsx(
      GridControls,
      {
        childLayout,
        onChange,
        parentLayout,
        isShownByDefault,
        panelId,
        showGridSpanDefaults
      }
    );
  }
  return null;
}
function FlexControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId
}) {
  const { selfStretch, flexSize } = childLayout;
  const { orientation = "horizontal" } = parentLayout ?? {};
  const flexControlValue = selfStretch || FLEX_CHILD_LAYOUT_VALUES.fit;
  const hasFlexSizeValue = isFlexSizeValue(flexControlValue);
  const hasFlexValue = () => !!selfStretch;
  const flexResetLabel = orientation === "horizontal" ? __("Width") : __("Height");
  const [availableUnits] = useSettings("spacing.units");
  const units = useCustomUnits({
    availableUnits: availableUnits || [
      "%",
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ]
  });
  const resetFlex = () => {
    onChange({
      selfStretch: void 0,
      flexSize: void 0
    });
  };
  useEffect(() => {
    if (isFlexSizeValue(selfStretch) && !flexSize) {
      onChange({
        ...childLayout,
        selfStretch: FLEX_CHILD_LAYOUT_VALUES.fit
      });
    }
  }, []);
  return /* @__PURE__ */ jsxs(
    VStack,
    {
      as: ToolsPanelItem,
      spacing: 2,
      hasValue: hasFlexValue,
      label: flexResetLabel,
      onDeselect: resetFlex,
      isShownByDefault,
      panelId,
      children: [
        /* @__PURE__ */ jsxs(
          ToggleGroupControl,
          {
            size: "__unstable-large",
            label: childLayoutOrientation(parentLayout),
            value: flexControlValue,
            help: helpText(flexControlValue, parentLayout),
            onChange: (value) => {
              const newFlexSize = isFlexSizeValue(value) ? flexSize : null;
              onChange({
                selfStretch: value,
                flexSize: newFlexSize
              });
            },
            isBlock: true,
            children: [
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.fit,
                  label: _x(
                    "Fit",
                    "Intrinsic block width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.fit
              ),
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.grow,
                  label: _x(
                    "Grow",
                    "Block with expanding width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.grow
              ),
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.max,
                  label: maxSizeLabel(parentLayout)
                },
                FLEX_CHILD_LAYOUT_VALUES.max
              ),
              /* @__PURE__ */ jsx(
                ToggleGroupControlOption,
                {
                  value: FLEX_CHILD_LAYOUT_VALUES.fixed,
                  label: _x(
                    "Fixed",
                    "Block with fixed width in flex layout"
                  )
                },
                FLEX_CHILD_LAYOUT_VALUES.fixed
              )
            ]
          }
        ),
        hasFlexSizeValue && /* @__PURE__ */ jsx(
          UnitControl,
          {
            size: "__unstable-large",
            units,
            onChange: (value) => {
              onChange({
                selfStretch: flexControlValue,
                flexSize: value
              });
            },
            value: flexSize,
            min: 0,
            label: flexResetLabel,
            hideLabelFromVision: true
          }
        )
      ]
    }
  );
}
function childLayoutOrientation(parentLayout) {
  const { orientation = "horizontal" } = parentLayout ?? {};
  return orientation === "horizontal" ? __("Width") : __("Height");
}
function GridControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId,
  showGridSpanDefaults
}) {
  const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
  const { columnCount, rowCount } = parentLayout ?? {};
  const rootClientId = useSelect(
    (select) => select(blockEditorStore).getBlockRootClientId(panelId)
  );
  const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
  const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
    rootClientId,
    columnCount || 3
  );
  const hasStartValue = () => !!columnStart || !!rowStart;
  const hasSpanValue = () => !!columnSpan || !!rowSpan;
  const resetGridStarts = () => {
    onChange({
      columnStart: void 0,
      rowStart: void 0
    });
  };
  const resetGridSpans = () => {
    onChange({
      columnSpan: void 0,
      rowSpan: void 0
    });
  };
  const maxColumnSpan = columnCount ? columnCount - (columnStart ?? 1) + 1 : void 0;
  const maxRowSpan = window.__experimentalEnableGridInteractivity && rowCount ? rowCount - (rowStart ?? 1) + 1 : void 0;
  const columnSpanValue = columnSpan ?? (showGridSpanDefaults ? 1 : void 0);
  const rowSpanValue = rowSpan ?? (showGridSpanDefaults ? 1 : void 0);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      Flex,
      {
        as: ToolsPanelItem,
        hasValue: hasSpanValue,
        label: __("Grid span"),
        onDeselect: resetGridSpans,
        isShownByDefault,
        panelId,
        children: [
          /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
            InputControl,
            {
              size: "__unstable-large",
              label: __("Column span"),
              type: "number",
              onChange: (value) => {
                const newColumnSpan = value === "" ? 1 : parseInt(value, 10);
                const constrainedValue = maxColumnSpan ? Math.min(newColumnSpan, maxColumnSpan) : newColumnSpan;
                onChange({
                  columnStart,
                  rowStart,
                  rowSpan,
                  columnSpan: constrainedValue
                });
              },
              value: columnSpanValue,
              min: 1,
              max: maxColumnSpan
            }
          ) }),
          /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
            InputControl,
            {
              size: "__unstable-large",
              label: __("Row span"),
              type: "number",
              onChange: (value) => {
                const newRowSpan = value === "" ? 1 : parseInt(value, 10);
                const constrainedValue = maxRowSpan ? Math.min(newRowSpan, maxRowSpan) : newRowSpan;
                onChange({
                  columnStart,
                  rowStart,
                  columnSpan,
                  rowSpan: constrainedValue
                });
              },
              value: rowSpanValue,
              min: 1,
              max: maxRowSpan
            }
          ) })
        ]
      }
    ),
    window.__experimentalEnableGridInteractivity && // Use Flex with an explicit width on the FlexItem instead of HStack to
    // work around an issue in webkit where inputs with a max attribute are
    // sized incorrectly.
    /* @__PURE__ */ jsxs(
      Flex,
      {
        as: ToolsPanelItem,
        hasValue: hasStartValue,
        label: __("Grid placement"),
        onDeselect: resetGridStarts,
        isShownByDefault: false,
        panelId,
        children: [
          /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
            InputControl,
            {
              size: "__unstable-large",
              label: __("Column"),
              type: "number",
              onChange: (value) => {
                const newColumnStart = value === "" ? 1 : parseInt(value, 10);
                onChange({
                  columnStart: newColumnStart,
                  rowStart,
                  columnSpan,
                  rowSpan
                });
                __unstableMarkNextChangeAsNotPersistent();
                moveBlocksToPosition(
                  [panelId],
                  rootClientId,
                  rootClientId,
                  getNumberOfBlocksBeforeCell(
                    newColumnStart,
                    rowStart
                  )
                );
              },
              value: columnStart ?? 1,
              min: 1,
              max: columnCount ? columnCount - (columnSpan ?? 1) + 1 : void 0
            }
          ) }),
          /* @__PURE__ */ jsx(FlexItem, { style: { width: "50%" }, children: /* @__PURE__ */ jsx(
            InputControl,
            {
              size: "__unstable-large",
              label: __("Row"),
              type: "number",
              onChange: (value) => {
                const newRowStart = value === "" ? 1 : parseInt(value, 10);
                onChange({
                  columnStart,
                  rowStart: newRowStart,
                  columnSpan,
                  rowSpan
                });
                __unstableMarkNextChangeAsNotPersistent();
                moveBlocksToPosition(
                  [panelId],
                  rootClientId,
                  rootClientId,
                  getNumberOfBlocksBeforeCell(
                    columnStart,
                    newRowStart
                  )
                );
              },
              value: rowStart ?? 1,
              min: 1,
              max: rowCount ? rowCount - (rowSpan ?? 1) + 1 : void 0
            }
          ) })
        ]
      }
    )
  ] });
}
export {
  childLayoutOrientation,
  ChildLayoutControl as default
};
//# sourceMappingURL=index.mjs.map
