"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SpacingSizesControl;
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _axial = _interopRequireDefault(require("./input-controls/axial"));
var _separated = _interopRequireDefault(require("./input-controls/separated"));
var _single = _interopRequireDefault(require("./input-controls/single"));
var _sidesDropdown = _interopRequireDefault(require("./sides-dropdown"));
var _useSpacingSizes = _interopRequireDefault(require("./hooks/use-spacing-sizes"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function SpacingSizesControl({
  inputProps,
  label: labelProp,
  minimumCustomValue = 0,
  onChange,
  onMouseOut,
  onMouseOver,
  showSideInLabel = true,
  sides = _utils.ALL_SIDES,
  useSelect,
  values
}) {
  const spacingSizes = (0, _useSpacingSizes.default)();
  const inputValues = values || _utils.DEFAULT_VALUES;
  const hasOneSide = sides?.length === 1;
  const hasOnlyAxialSides = sides?.includes('horizontal') && sides?.includes('vertical') && sides?.length === 2;
  const [view, setView] = (0, _element.useState)((0, _utils.getInitialView)(inputValues, sides));
  const handleOnChange = nextValue => {
    const newValues = {
      ...values,
      ...nextValue
    };
    onChange(newValues);
  };
  const inputControlProps = {
    ...inputProps,
    minimumCustomValue,
    onChange: handleOnChange,
    onMouseOut,
    onMouseOver,
    sides,
    spacingSizes,
    type: labelProp,
    useSelect,
    values: inputValues
  };
  const renderControls = () => {
    if (view === _utils.VIEWS.axial) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_axial.default, {
        ...inputControlProps
      });
    }
    if (view === _utils.VIEWS.custom) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_separated.default, {
        ...inputControlProps
      });
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_single.default, {
      side: view,
      ...inputControlProps,
      showSideInLabel: showSideInLabel
    });
  };
  const sideLabel = _utils.ALL_SIDES.includes(view) && showSideInLabel ? _utils.LABELS[view] : '';
  const label = (0, _i18n.sprintf)(
  // translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
  (0, _i18n.__)('%1$s %2$s'), labelProp, sideLabel).trim();
  const dropdownLabelText = (0, _i18n.sprintf)(
  // translators: %s: The current spacing property e.g. "Padding", "Margin".
  (0, _i18n._x)('%s options', 'Button label to reveal side configuration options'), labelProp);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: "spacing-sizes-control",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
      className: "spacing-sizes-control__header",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl.VisualLabel, {
        as: "legend",
        className: "spacing-sizes-control__label",
        children: label
      }), !hasOneSide && !hasOnlyAxialSides && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidesDropdown.default, {
        label: dropdownLabelText,
        onChange: setView,
        sides: sides,
        value: view
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
      spacing: 0.5,
      children: renderControls()
    })]
  });
}
//# sourceMappingURL=index.js.map