"use strict";

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

/**
 * Internal dependencies
 */

const DEFAULT_UNITS = ['px', 'em', 'rem', 'vw', 'vh'];
function SizeControl({
  // Do not allow manipulation of margin bottom
  __nextHasNoMarginBottom,
  ...props
}) {
  const {
    baseControlProps
  } = (0, _components.useBaseControlProps)(props);
  const {
    value,
    onChange,
    fallbackValue,
    disabled,
    label
  } = props;
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: DEFAULT_UNITS
  });
  const [valueQuantity, valueUnit = 'px'] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value, units);
  const isValueUnitRelative = !!valueUnit && ['em', 'rem', 'vw', 'vh'].includes(valueUnit);

  // Receives the new value from the UnitControl component as a string containing the value and unit.
  const handleUnitControlChange = newValue => {
    onChange(newValue);
  };

  // Receives the new value from the RangeControl component as a number.
  const handleRangeControlChange = newValue => {
    onChange?.(newValue + valueUnit);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BaseControl, {
    ...baseControlProps,
    __nextHasNoMarginBottom: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        isBlock: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          label: label,
          hideLabelFromVision: true,
          value: value,
          onChange: handleUnitControlChange,
          units: units,
          min: 0,
          disabled: disabled
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
        isBlock: true,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
          marginX: 2,
          marginBottom: 0,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
            __next40pxDefaultSize: true,
            __nextHasNoMarginBottom: true,
            label: label,
            hideLabelFromVision: true,
            value: valueQuantity,
            initialPosition: fallbackValue,
            withInputField: false,
            onChange: handleRangeControlChange,
            min: 0,
            max: isValueUnitRelative ? 10 : 100,
            step: isValueUnitRelative ? 0.1 : 1,
            disabled: disabled
          })
        })
      })]
    })
  });
}
var _default = exports.default = SizeControl;
//# sourceMappingURL=index.js.map