"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TextAlignmentControl;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _element = require("@wordpress/element");
var _segmentedTextControl = _interopRequireDefault(require("../segmented-text-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const TEXT_ALIGNMENT_OPTIONS = [{
  label: (0, _i18n.__)('Align text left'),
  value: 'left',
  icon: _icons.alignLeft
}, {
  label: (0, _i18n.__)('Align text center'),
  value: 'center',
  icon: _icons.alignCenter
}, {
  label: (0, _i18n.__)('Align text right'),
  value: 'right',
  icon: _icons.alignRight
}, {
  label: (0, _i18n.__)('Justify text'),
  value: 'justify',
  icon: _icons.alignJustify
}];
const DEFAULT_OPTIONS = ['left', 'center', 'right'];

/**
 * Control to facilitate text alignment selections.
 *
 * @param {Object}   props           Component props.
 * @param {string}   props.className Class name to add to the control.
 * @param {string}   props.value     Currently selected text alignment.
 * @param {Function} props.onChange  Handles change in text alignment selection.
 * @param {string[]} props.options   Array of text alignment options to display.
 *
 * @return {Element} Text alignment control.
 */
function TextAlignmentControl({
  className,
  value,
  onChange,
  options = DEFAULT_OPTIONS
}) {
  const validOptions = (0, _element.useMemo)(() => TEXT_ALIGNMENT_OPTIONS.filter(option => options.includes(option.value)), [options]);
  if (!validOptions.length) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_segmentedTextControl.default, {
    label: (0, _i18n.__)('Text alignment'),
    options: validOptions,
    className: (0, _clsx.default)('block-editor-text-alignment-control', className),
    value: value,
    onChange: newValue => {
      onChange(newValue === value ? undefined : newValue);
    }
  });
}
//# sourceMappingURL=index.js.map