"use strict";

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

const icons = {
  left: _icons.justifyLeft,
  center: _icons.justifyCenter,
  right: _icons.justifyRight,
  'space-between': _icons.justifySpaceBetween,
  stretch: _icons.justifyStretch
};
function JustifyContentUI({
  allowedControls = ['left', 'center', 'right', 'space-between'],
  isCollapsed = true,
  onChange,
  value,
  popoverProps,
  isToolbar
}) {
  // If the control is already selected we want a click
  // again on the control to deselect the item, so we
  // call onChange( undefined )
  const handleClick = next => {
    if (next === value) {
      onChange(undefined);
    } else {
      onChange(next);
    }
  };
  const icon = value ? icons[value] : icons.left;
  const allControls = [{
    name: 'left',
    icon: _icons.justifyLeft,
    title: (0, _i18n.__)('Justify items left'),
    isActive: 'left' === value,
    onClick: () => handleClick('left')
  }, {
    name: 'center',
    icon: _icons.justifyCenter,
    title: (0, _i18n.__)('Justify items center'),
    isActive: 'center' === value,
    onClick: () => handleClick('center')
  }, {
    name: 'right',
    icon: _icons.justifyRight,
    title: (0, _i18n.__)('Justify items right'),
    isActive: 'right' === value,
    onClick: () => handleClick('right')
  }, {
    name: 'space-between',
    icon: _icons.justifySpaceBetween,
    title: (0, _i18n.__)('Space between items'),
    isActive: 'space-between' === value,
    onClick: () => handleClick('space-between')
  }, {
    name: 'stretch',
    icon: _icons.justifyStretch,
    title: (0, _i18n.__)('Stretch items'),
    isActive: 'stretch' === value,
    onClick: () => handleClick('stretch')
  }];
  const UIComponent = isToolbar ? _components.ToolbarGroup : _components.ToolbarDropdownMenu;
  const extraProps = isToolbar ? {
    isCollapsed
  } : {};
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(UIComponent, {
    icon: icon,
    popoverProps: popoverProps,
    label: (0, _i18n.__)('Change items justification'),
    controls: allControls.filter(elem => allowedControls.includes(elem.name)),
    ...extraProps
  });
}
var _default = exports.default = JustifyContentUI;
//# sourceMappingURL=ui.js.map