"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _utils = require("./utils");
var _gap = require("../hooks/gap");
var _components2 = require("../components");
var _utils2 = require("../hooks/utils");
var _definitions = require("./definitions");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

// Used with the default, horizontal flex orientation.
const justifyContentMap = {
  left: 'flex-start',
  right: 'flex-end',
  center: 'center',
  'space-between': 'space-between'
};

// Used with the vertical (column) flex orientation.
const alignItemsMap = {
  left: 'flex-start',
  right: 'flex-end',
  center: 'center',
  stretch: 'stretch'
};
const verticalAlignmentMap = {
  top: 'flex-start',
  center: 'center',
  bottom: 'flex-end',
  stretch: 'stretch',
  'space-between': 'space-between'
};
const flexWrapOptions = ['wrap', 'nowrap'];
var _default = exports.default = {
  name: 'flex',
  label: (0, _i18n.__)('Flex'),
  inspectorControls: function FlexLayoutInspectorControls({
    layout = {},
    onChange,
    layoutBlockSupport = {}
  }) {
    const {
      allowOrientation = true
    } = layoutBlockSupport;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
            layout: layout,
            onChange: onChange
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
          children: allowOrientation && /*#__PURE__*/(0, _jsxRuntime.jsx)(OrientationControl, {
            layout: layout,
            onChange: onChange
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexWrapControl, {
        layout: layout,
        onChange: onChange
      })]
    });
  },
  toolBarControls: function FlexLayoutToolbarControls({
    layout = {},
    onChange,
    layoutBlockSupport
  }) {
    if (layoutBlockSupport?.allowSwitching) {
      return null;
    }
    const {
      allowVerticalAlignment = true
    } = layoutBlockSupport;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components2.BlockControls, {
      group: "block",
      __experimentalShareWithChildBlocks: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutJustifyContentControl, {
        layout: layout,
        onChange: onChange,
        isToolbar: true
      }), allowVerticalAlignment && /*#__PURE__*/(0, _jsxRuntime.jsx)(FlexLayoutVerticalAlignmentControl, {
        layout: layout,
        onChange: onChange,
        isToolbar: true
      })]
    });
  },
  getLayoutStyle: function getLayoutStyle({
    selector,
    layout,
    style,
    blockName,
    hasBlockGapSupport,
    layoutDefinitions = _definitions.LAYOUT_DEFINITIONS
  }) {
    const {
      orientation = 'horizontal'
    } = layout;

    // If a block's block.json skips serialization for spacing or spacing.blockGap,
    // don't apply the user-defined value to the styles.
    const blockGapValue = style?.spacing?.blockGap && !(0, _utils2.shouldSkipSerialization)(blockName, 'spacing', 'blockGap') ? (0, _gap.getGapCSSValue)(style?.spacing?.blockGap, '0.5em') : undefined;
    const justifyContent = justifyContentMap[layout.justifyContent];
    const flexWrap = flexWrapOptions.includes(layout.flexWrap) ? layout.flexWrap : 'wrap';
    const verticalAlignment = verticalAlignmentMap[layout.verticalAlignment];
    const alignItems = alignItemsMap[layout.justifyContent] || alignItemsMap.left;
    let output = '';
    const rules = [];
    if (flexWrap && flexWrap !== 'wrap') {
      rules.push(`flex-wrap: ${flexWrap}`);
    }
    if (orientation === 'horizontal') {
      if (verticalAlignment) {
        rules.push(`align-items: ${verticalAlignment}`);
      }
      if (justifyContent) {
        rules.push(`justify-content: ${justifyContent}`);
      }
    } else {
      if (verticalAlignment) {
        rules.push(`justify-content: ${verticalAlignment}`);
      }
      rules.push('flex-direction: column');
      rules.push(`align-items: ${alignItems}`);
    }
    if (rules.length) {
      output = `${(0, _utils.appendSelectors)(selector)} {
				${rules.join('; ')};
			}`;
    }

    // Output blockGap styles based on rules contained in layout definitions in theme.json.
    if (hasBlockGapSupport && blockGapValue) {
      output += (0, _utils.getBlockGapCSS)(selector, layoutDefinitions, 'flex', blockGapValue);
    }
    return output;
  },
  getOrientation(layout) {
    const {
      orientation = 'horizontal'
    } = layout;
    return orientation;
  },
  getAlignments() {
    return [];
  }
};
function FlexLayoutVerticalAlignmentControl({
  layout,
  onChange,
  isToolbar = false
}) {
  const {
    orientation = 'horizontal'
  } = layout;
  const defaultVerticalAlignment = orientation === 'horizontal' ? verticalAlignmentMap.center : verticalAlignmentMap.top;
  const {
    verticalAlignment = defaultVerticalAlignment
  } = layout;
  const onVerticalAlignmentChange = value => {
    onChange({
      ...layout,
      verticalAlignment: value
    });
  };
  if (isToolbar) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.BlockVerticalAlignmentControl, {
      onChange: onVerticalAlignmentChange,
      value: verticalAlignment,
      controls: orientation === 'horizontal' ? ['top', 'center', 'bottom', 'stretch'] : ['top', 'center', 'bottom', 'space-between']
    });
  }
  const verticalAlignmentOptions = [{
    value: 'flex-start',
    label: (0, _i18n.__)('Align items top')
  }, {
    value: 'center',
    label: (0, _i18n.__)('Align items center')
  }, {
    value: 'flex-end',
    label: (0, _i18n.__)('Align items bottom')
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: "block-editor-hooks__flex-layout-vertical-alignment-control",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
      children: (0, _i18n.__)('Vertical alignment')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: verticalAlignmentOptions.map((value, icon, label) => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          label: label,
          icon: icon,
          isPressed: verticalAlignment === value,
          onClick: () => onVerticalAlignmentChange(value)
        }, value);
      })
    })]
  });
}
const POPOVER_PROPS = {
  placement: 'bottom-start'
};
function FlexLayoutJustifyContentControl({
  layout,
  onChange,
  isToolbar = false
}) {
  const {
    justifyContent = 'left',
    orientation = 'horizontal'
  } = layout;
  const onJustificationChange = value => {
    onChange({
      ...layout,
      justifyContent: value
    });
  };
  const allowedControls = ['left', 'center', 'right'];
  if (orientation === 'horizontal') {
    allowedControls.push('space-between');
  } else {
    allowedControls.push('stretch');
  }
  if (isToolbar) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components2.JustifyContentControl, {
      allowedControls: allowedControls,
      value: justifyContent,
      onChange: onJustificationChange,
      popoverProps: POPOVER_PROPS
    });
  }
  const justificationOptions = [{
    value: 'left',
    icon: _icons.justifyLeft,
    label: (0, _i18n.__)('Justify items left')
  }, {
    value: 'center',
    icon: _icons.justifyCenter,
    label: (0, _i18n.__)('Justify items center')
  }, {
    value: 'right',
    icon: _icons.justifyRight,
    label: (0, _i18n.__)('Justify items right')
  }];
  if (orientation === 'horizontal') {
    justificationOptions.push({
      value: 'space-between',
      icon: _icons.justifySpaceBetween,
      label: (0, _i18n.__)('Space between items')
    });
  } else {
    justificationOptions.push({
      value: 'stretch',
      icon: _icons.justifyStretch,
      label: (0, _i18n.__)('Stretch items')
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Justification'),
    value: justifyContent,
    onChange: onJustificationChange,
    className: "block-editor-hooks__flex-layout-justification-controls",
    children: justificationOptions.map(({
      value,
      icon,
      label
    }) => {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
        value: value,
        icon: icon,
        label: label
      }, value);
    })
  });
}
function FlexWrapControl({
  layout,
  onChange
}) {
  const {
    flexWrap = 'wrap'
  } = layout;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Allow to wrap to multiple lines'),
    onChange: value => {
      onChange({
        ...layout,
        flexWrap: value ? 'wrap' : 'nowrap'
      });
    },
    checked: flexWrap === 'wrap'
  });
}
function OrientationControl({
  layout,
  onChange
}) {
  const {
    orientation = 'horizontal',
    verticalAlignment,
    justifyContent
  } = layout;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
    __nextHasNoMarginBottom: true,
    className: "block-editor-hooks__flex-layout-orientation-controls",
    label: (0, _i18n.__)('Orientation'),
    value: orientation,
    onChange: value => {
      // Make sure the vertical alignment and justification are compatible with the new orientation.
      let newVerticalAlignment = verticalAlignment;
      let newJustification = justifyContent;
      if (value === 'horizontal') {
        if (verticalAlignment === 'space-between') {
          newVerticalAlignment = 'center';
        }
        if (justifyContent === 'stretch') {
          newJustification = 'left';
        }
      } else {
        if (verticalAlignment === 'stretch') {
          newVerticalAlignment = 'top';
        }
        if (justifyContent === 'space-between') {
          newJustification = 'left';
        }
      }
      return onChange({
        ...layout,
        orientation: value,
        verticalAlignment: newVerticalAlignment,
        justifyContent: newJustification
      });
    },
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
      icon: _icons.arrowRight,
      value: "horizontal",
      label: (0, _i18n.__)('Horizontal')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
      icon: _icons.arrowDown,
      value: "vertical",
      label: (0, _i18n.__)('Vertical')
    })]
  });
}
//# sourceMappingURL=flex.js.map