"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.childLayoutOrientation = childLayoutOrientation;
exports.default = ChildLayoutControl;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _useGetNumberOfBlocksBeforeCell = require("../grid/use-get-number-of-blocks-before-cell");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function helpText(selfStretch, parentLayout) {
  const {
    orientation = 'horizontal'
  } = parentLayout;
  if (selfStretch === 'fill') {
    return (0, _i18n.__)('Stretch to fill available space.');
  }
  if (selfStretch === 'fixed' && orientation === 'horizontal') {
    return (0, _i18n.__)('Specify a fixed width.');
  } else if (selfStretch === 'fixed') {
    return (0, _i18n.__)('Specify a fixed height.');
  }
  return (0, _i18n.__)('Fit contents.');
}

/**
 * Form to edit the child layout value.
 *
 * @param {Object}   props                  Props.
 * @param {Object}   props.value            The child layout value.
 * @param {Function} props.onChange         Function to update the child layout value.
 * @param {Object}   props.parentLayout     The parent layout value.
 *
 * @param {boolean}  props.isShownByDefault
 * @param {string}   props.panelId
 * @return {Element} child layout edit element.
 */
function ChildLayoutControl({
  value: childLayout = {},
  onChange,
  parentLayout,
  isShownByDefault,
  panelId
}) {
  const {
    type: parentType,
    default: {
      type: defaultParentType = 'default'
    } = {}
  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
  const parentLayoutType = parentType || defaultParentType;
  if (parentLayoutType === 'flex') {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexControls, {
      childLayout: childLayout,
      onChange: onChange,
      parentLayout: parentLayout,
      isShownByDefault: isShownByDefault,
      panelId: panelId
    });
  } else if (parentLayoutType === 'grid') {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridControls, {
      childLayout: childLayout,
      onChange: onChange,
      parentLayout: parentLayout,
      isShownByDefault: isShownByDefault,
      panelId: panelId
    });
  }
  return null;
}
function FlexControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId
}) {
  const {
    selfStretch,
    flexSize
  } = childLayout;
  const {
    orientation = 'horizontal'
  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
  const hasFlexValue = () => !!selfStretch;
  const flexResetLabel = orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
  const resetFlex = () => {
    onChange({
      selfStretch: undefined,
      flexSize: undefined
    });
  };
  (0, _element.useEffect)(() => {
    if (selfStretch === 'fixed' && !flexSize) {
      onChange({
        ...childLayout,
        selfStretch: 'fit'
      });
    }
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    as: _components.__experimentalToolsPanelItem,
    spacing: 2,
    hasValue: hasFlexValue,
    label: flexResetLabel,
    onDeselect: resetFlex,
    isShownByDefault: isShownByDefault,
    panelId: panelId,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
      __nextHasNoMarginBottom: true,
      size: "__unstable-large",
      label: childLayoutOrientation(parentLayout),
      value: selfStretch || 'fit',
      help: helpText(selfStretch, parentLayout),
      onChange: value => {
        const newFlexSize = value !== 'fixed' ? null : flexSize;
        onChange({
          selfStretch: value,
          flexSize: newFlexSize
        });
      },
      isBlock: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
        value: "fit",
        label: (0, _i18n._x)('Fit', 'Intrinsic block width in flex layout')
      }, "fit"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
        value: "fill",
        label: (0, _i18n._x)('Grow', 'Block with expanding width in flex layout')
      }, "fill"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
        value: "fixed",
        label: (0, _i18n._x)('Fixed', 'Block with fixed width in flex layout')
      }, "fixed")]
    }), selfStretch === 'fixed' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
      size: "__unstable-large",
      onChange: value => {
        onChange({
          selfStretch,
          flexSize: value
        });
      },
      value: flexSize
    })]
  });
}
function childLayoutOrientation(parentLayout) {
  const {
    orientation = 'horizontal'
  } = parentLayout;
  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
}
function GridControls({
  childLayout,
  onChange,
  parentLayout,
  isShownByDefault,
  panelId
}) {
  const {
    columnStart,
    rowStart,
    columnSpan,
    rowSpan
  } = childLayout;
  const {
    columnCount = 3,
    rowCount
  } = parentLayout !== null && parentLayout !== void 0 ? parentLayout : {};
  const rootClientId = (0, _data.useSelect)(select => select(_store.store).getBlockRootClientId(panelId));
  const {
    moveBlocksToPosition,
    __unstableMarkNextChangeAsNotPersistent
  } = (0, _data.useDispatch)(_store.store);
  const getNumberOfBlocksBeforeCell = (0, _useGetNumberOfBlocksBeforeCell.useGetNumberOfBlocksBeforeCell)(rootClientId, columnCount);
  const hasStartValue = () => !!columnStart || !!rowStart;
  const hasSpanValue = () => !!columnSpan || !!rowSpan;
  const resetGridStarts = () => {
    onChange({
      columnStart: undefined,
      rowStart: undefined
    });
  };
  const resetGridSpans = () => {
    onChange({
      columnSpan: undefined,
      rowSpan: undefined
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      as: _components.__experimentalToolsPanelItem,
      hasValue: hasSpanValue,
      label: (0, _i18n.__)('Grid span'),
      onDeselect: resetGridSpans,
      isShownByDefault: isShownByDefault,
      panelId: panelId,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
        size: "__unstable-large",
        label: (0, _i18n.__)('Column span'),
        type: "number",
        onChange: value => {
          // Don't allow unsetting.
          const newColumnSpan = value === '' ? 1 : parseInt(value, 10);
          onChange({
            columnStart,
            rowStart,
            rowSpan,
            columnSpan: newColumnSpan
          });
        },
        value: columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1,
        min: 1
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
        size: "__unstable-large",
        label: (0, _i18n.__)('Row span'),
        type: "number",
        onChange: value => {
          // Don't allow unsetting.
          const newRowSpan = value === '' ? 1 : parseInt(value, 10);
          onChange({
            columnStart,
            rowStart,
            columnSpan,
            rowSpan: newRowSpan
          });
        },
        value: rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1,
        min: 1
      })]
    }), window.__experimentalEnableGridInteractivity && columnCount &&
    /*#__PURE__*/
    // 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.
    (0, _jsxRuntime.jsxs)(_components.Flex, {
      as: _components.__experimentalToolsPanelItem,
      hasValue: hasStartValue,
      label: (0, _i18n.__)('Grid placement'),
      onDeselect: resetGridStarts,
      isShownByDefault: false,
      panelId: panelId,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        style: {
          width: '50%'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
          size: "__unstable-large",
          label: (0, _i18n.__)('Column'),
          type: "number",
          onChange: value => {
            // Don't allow unsetting.
            const newColumnStart = value === '' ? 1 : parseInt(value, 10);
            onChange({
              columnStart: newColumnStart,
              rowStart,
              columnSpan,
              rowSpan
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(newColumnStart, rowStart));
          },
          value: columnStart !== null && columnStart !== void 0 ? columnStart : 1,
          min: 1,
          max: columnCount ? columnCount - (columnSpan !== null && columnSpan !== void 0 ? columnSpan : 1) + 1 : undefined
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        style: {
          width: '50%'
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
          size: "__unstable-large",
          label: (0, _i18n.__)('Row'),
          type: "number",
          onChange: value => {
            // Don't allow unsetting.
            const newRowStart = value === '' ? 1 : parseInt(value, 10);
            onChange({
              columnStart,
              rowStart: newRowStart,
              columnSpan,
              rowSpan
            });
            __unstableMarkNextChangeAsNotPersistent();
            moveBlocksToPosition([panelId], rootClientId, rootClientId, getNumberOfBlocksBeforeCell(columnStart, newRowStart));
          },
          value: rowStart !== null && rowStart !== void 0 ? rowStart : 1,
          min: 1,
          max: rowCount ? rowCount - (rowSpan !== null && rowSpan !== void 0 ? rowSpan : 1) + 1 : undefined
        })
      })]
    })]
  });
}
//# sourceMappingURL=index.js.map