"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/components/spacing-sizes-control/input-controls/spacing-input-control.js
var spacing_input_control_exports = {};
__export(spacing_input_control_exports, {
  default: () => SpacingInputControl
});
module.exports = __toCommonJS(spacing_input_control_exports);
var import_components = require("@wordpress/components");
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_use_settings = require("../../use-settings");
var import_store = require("../../../store");
var import_utils = require("../utils");
var import_jsx_runtime = require("react/jsx-runtime");
var CUSTOM_VALUE_SETTINGS = {
  px: { max: 300, steps: 1 },
  "%": { max: 100, steps: 1 },
  vw: { max: 100, steps: 1 },
  vh: { max: 100, steps: 1 },
  em: { max: 10, steps: 0.1 },
  rm: { max: 10, steps: 0.1 },
  svw: { max: 100, steps: 1 },
  lvw: { max: 100, steps: 1 },
  dvw: { max: 100, steps: 1 },
  svh: { max: 100, steps: 1 },
  lvh: { max: 100, steps: 1 },
  dvh: { max: 100, steps: 1 },
  vi: { max: 100, steps: 1 },
  svi: { max: 100, steps: 1 },
  lvi: { max: 100, steps: 1 },
  dvi: { max: 100, steps: 1 },
  vb: { max: 100, steps: 1 },
  svb: { max: 100, steps: 1 },
  lvb: { max: 100, steps: 1 },
  dvb: { max: 100, steps: 1 },
  vmin: { max: 100, steps: 1 },
  svmin: { max: 100, steps: 1 },
  lvmin: { max: 100, steps: 1 },
  dvmin: { max: 100, steps: 1 },
  vmax: { max: 100, steps: 1 },
  svmax: { max: 100, steps: 1 },
  lvmax: { max: 100, steps: 1 },
  dvmax: { max: 100, steps: 1 }
};
function SpacingInputControl({
  icon,
  isMixed = false,
  minimumCustomValue,
  onChange,
  onMouseOut,
  onMouseOver,
  showSideInLabel = true,
  side,
  spacingSizes,
  type,
  value
}) {
  value = (0, import_utils.getPresetValueFromCustomValue)(value, spacingSizes);
  let selectListSizes = spacingSizes;
  const showRangeControl = spacingSizes.length <= import_utils.RANGE_CONTROL_MAX_SIZE;
  const disableCustomSpacingSizes = (0, import_data.useSelect)((select) => {
    const editorSettings = select(import_store.store).getSettings();
    return editorSettings?.disableCustomSpacingSizes;
  });
  const [showCustomValueControl, setShowCustomValueControl] = (0, import_element.useState)(
    !disableCustomSpacingSizes && value !== void 0 && !(0, import_utils.isValueSpacingPreset)(value)
  );
  const [minValue, setMinValue] = (0, import_element.useState)(minimumCustomValue);
  const previousValue = (0, import_compose.usePrevious)(value);
  if (!!value && previousValue !== value && !(0, import_utils.isValueSpacingPreset)(value) && showCustomValueControl !== true) {
    setShowCustomValueControl(true);
  }
  const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
  const units = (0, import_components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ["px", "em", "rem"]
  });
  let currentValue = null;
  const showCustomValueInSelectList = !showRangeControl && !showCustomValueControl && value !== void 0 && (!(0, import_utils.isValueSpacingPreset)(value) || (0, import_utils.isValueSpacingPreset)(value) && isMixed);
  if (showCustomValueInSelectList) {
    selectListSizes = [
      ...spacingSizes,
      {
        name: !isMixed ? (
          // translators: %s: A custom measurement, e.g. a number followed by a unit like 12px.
          (0, import_i18n.sprintf)((0, import_i18n.__)("Custom (%s)"), value)
        ) : (0, import_i18n.__)("Mixed"),
        slug: "custom",
        size: value
      }
    ];
    currentValue = selectListSizes.length - 1;
  } else if (!isMixed) {
    currentValue = !showCustomValueControl ? (0, import_utils.getSliderValueFromPreset)(value, spacingSizes) : (0, import_utils.getCustomValueFromPreset)(value, spacingSizes);
  }
  const selectedUnit = (0, import_element.useMemo)(
    () => (0, import_components.__experimentalParseQuantityAndUnitFromRawValue)(currentValue),
    [currentValue]
  )[1] || units[0]?.value;
  const setInitialValue = () => {
    if (value === void 0) {
      onChange("0");
    }
  };
  const customTooltipContent = (newValue) => value === void 0 ? void 0 : spacingSizes[newValue]?.name;
  const customRangeValue = parseFloat(currentValue, 10);
  const getNewCustomValue = (newSize) => {
    const isNumeric = !isNaN(parseFloat(newSize));
    const nextValue = isNumeric ? newSize : void 0;
    return nextValue;
  };
  const getNewPresetValue = (newSize, controlType) => {
    const size = parseInt(newSize, 10);
    if (controlType === "selectList") {
      if (size === 0) {
        return void 0;
      }
      if (size === 1) {
        return "0";
      }
    } else if (size === 0) {
      return "0";
    }
    return `var:preset|spacing|${spacingSizes[newSize]?.slug}`;
  };
  const handleCustomValueSliderChange = (next) => {
    onChange([next, selectedUnit].join(""));
  };
  const allPlaceholder = isMixed ? (0, import_i18n.__)("Mixed") : null;
  const options = selectListSizes.map((size, index) => ({
    key: index,
    name: size.name
  }));
  const marks = spacingSizes.slice(1, spacingSizes.length - 1).map((_newValue, index) => ({
    value: index + 1,
    label: void 0
  }));
  const sideLabel = import_utils.ALL_SIDES.includes(side) && showSideInLabel ? import_utils.LABELS[side] : "";
  const typeLabel = showSideInLabel ? type?.toLowerCase() : type;
  const ariaLabel = (0, import_i18n.sprintf)(
    // translators: 1: The side of the block being modified (top, bottom, left etc.). 2. Type of spacing being modified (padding, margin, etc).
    (0, import_i18n._x)("%1$s %2$s", "spacing"),
    sideLabel,
    typeLabel
  ).trim();
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { className: "spacing-sizes-control__wrapper", children: [
    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.Icon,
      {
        className: "spacing-sizes-control__icon",
        icon,
        size: 24
      }
    ),
    showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.__experimentalUnitControl,
        {
          onMouseOver,
          onMouseOut,
          onFocus: onMouseOver,
          onBlur: onMouseOut,
          onChange: (newSize) => onChange(getNewCustomValue(newSize)),
          value: currentValue,
          units,
          min: minValue,
          placeholder: allPlaceholder,
          disableUnits: isMixed,
          label: ariaLabel,
          hideLabelFromVision: true,
          className: "spacing-sizes-control__custom-value-input",
          size: "__unstable-large",
          onDragStart: () => {
            if (value?.charAt(0) === "-") {
              setMinValue(0);
            }
          },
          onDrag: () => {
            if (value?.charAt(0) === "-") {
              setMinValue(0);
            }
          },
          onDragEnd: () => {
            setMinValue(minimumCustomValue);
          }
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.RangeControl,
        {
          __next40pxDefaultSize: true,
          onMouseOver,
          onMouseOut,
          onFocus: onMouseOver,
          onBlur: onMouseOut,
          value: customRangeValue,
          min: 0,
          max: CUSTOM_VALUE_SETTINGS[selectedUnit]?.max ?? 10,
          step: CUSTOM_VALUE_SETTINGS[selectedUnit]?.steps ?? 0.1,
          withInputField: false,
          onChange: handleCustomValueSliderChange,
          className: "spacing-sizes-control__custom-value-range",
          __nextHasNoMarginBottom: true,
          label: ariaLabel,
          hideLabelFromVision: true
        }
      )
    ] }),
    showRangeControl && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.RangeControl,
      {
        __next40pxDefaultSize: true,
        onMouseOver,
        onMouseOut,
        className: "spacing-sizes-control__range-control",
        value: currentValue,
        onChange: (newSize) => onChange(getNewPresetValue(newSize)),
        onMouseDown: (event) => {
          if (event?.nativeEvent?.offsetX < 35) {
            setInitialValue();
          }
        },
        withInputField: false,
        "aria-valuenow": currentValue,
        "aria-valuetext": spacingSizes[currentValue]?.name,
        renderTooltipContent: customTooltipContent,
        min: 0,
        max: spacingSizes.length - 1,
        marks,
        label: ariaLabel,
        hideLabelFromVision: true,
        __nextHasNoMarginBottom: true,
        onFocus: onMouseOver,
        onBlur: onMouseOut
      }
    ),
    !showRangeControl && !showCustomValueControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.CustomSelectControl,
      {
        className: "spacing-sizes-control__custom-select-control",
        value: (
          // passing empty string as a fallback to continue using the
          // component in controlled mode
          options.find(
            (option) => option.key === currentValue
          ) || ""
        ),
        onChange: (selection) => {
          onChange(
            getNewPresetValue(
              selection.selectedItem.key,
              "selectList"
            )
          );
        },
        options,
        label: ariaLabel,
        hideLabelFromVision: true,
        size: "__unstable-large",
        onMouseOver,
        onMouseOut,
        onFocus: onMouseOver,
        onBlur: onMouseOut
      }
    ),
    !disableCustomSpacingSizes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_components.Button,
      {
        label: showCustomValueControl ? (0, import_i18n.__)("Use size preset") : (0, import_i18n.__)("Set custom size"),
        icon: import_icons.settings,
        onClick: () => {
          setShowCustomValueControl(!showCustomValueControl);
        },
        isPressed: showCustomValueControl,
        size: "small",
        className: "spacing-sizes-control__custom-toggle",
        iconSize: 24
      }
    )
  ] });
}
//# sourceMappingURL=spacing-input-control.js.map
