// packages/block-editor/src/components/height-control/index.js
import { useMemo } from "@wordpress/element";
import {
  BaseControl,
  RangeControl,
  Flex,
  FlexItem,
  __experimentalSpacer as Spacer,
  __experimentalUseCustomUnits as useCustomUnits,
  __experimentalUnitControl as UnitControl,
  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue
} from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSettings } from "../use-settings";
import { jsx, jsxs } from "react/jsx-runtime";
var RANGE_CONTROL_CUSTOM_SETTINGS = {
  px: { max: 1e3, step: 1 },
  "%": { max: 100, step: 1 },
  vw: { max: 100, step: 1 },
  vh: { max: 100, step: 1 },
  em: { max: 50, step: 0.1 },
  rem: { max: 50, step: 0.1 },
  svw: { max: 100, step: 1 },
  lvw: { max: 100, step: 1 },
  dvw: { max: 100, step: 1 },
  svh: { max: 100, step: 1 },
  lvh: { max: 100, step: 1 },
  dvh: { max: 100, step: 1 },
  vi: { max: 100, step: 1 },
  svi: { max: 100, step: 1 },
  lvi: { max: 100, step: 1 },
  dvi: { max: 100, step: 1 },
  vb: { max: 100, step: 1 },
  svb: { max: 100, step: 1 },
  lvb: { max: 100, step: 1 },
  dvb: { max: 100, step: 1 },
  vmin: { max: 100, step: 1 },
  svmin: { max: 100, step: 1 },
  lvmin: { max: 100, step: 1 },
  dvmin: { max: 100, step: 1 },
  vmax: { max: 100, step: 1 },
  svmax: { max: 100, step: 1 },
  lvmax: { max: 100, step: 1 },
  dvmax: { max: 100, step: 1 }
};
function HeightControl({
  label = __("Height"),
  onChange,
  value
}) {
  const customRangeValue = parseFloat(value);
  const [availableUnits] = useSettings("spacing.units");
  const units = useCustomUnits({
    availableUnits: availableUnits || [
      "%",
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ]
  });
  const selectedUnit = useMemo(
    () => parseQuantityAndUnitFromRawValue(value),
    [value]
  )[1] || units[0]?.value || "px";
  const handleSliderChange = (next) => {
    onChange([next, selectedUnit].join(""));
  };
  const handleUnitChange = (newUnit) => {
    const [currentValue, currentUnit] = parseQuantityAndUnitFromRawValue(value);
    if (["em", "rem"].includes(newUnit) && currentUnit === "px") {
      onChange((currentValue / 16).toFixed(2) + newUnit);
    } else if (["em", "rem"].includes(currentUnit) && newUnit === "px") {
      onChange(Math.round(currentValue * 16) + newUnit);
    } else if ([
      "%",
      "vw",
      "svw",
      "lvw",
      "dvw",
      "vh",
      "svh",
      "lvh",
      "dvh",
      "vi",
      "svi",
      "lvi",
      "dvi",
      "vb",
      "svb",
      "lvb",
      "dvb",
      "vmin",
      "svmin",
      "lvmin",
      "dvmin",
      "vmax",
      "svmax",
      "lvmax",
      "dvmax"
    ].includes(newUnit) && currentValue > 100) {
      onChange(100 + newUnit);
    }
  };
  return /* @__PURE__ */ jsxs("fieldset", { className: "block-editor-height-control", children: [
    /* @__PURE__ */ jsx(BaseControl.VisualLabel, { as: "legend", children: label }),
    /* @__PURE__ */ jsxs(Flex, { children: [
      /* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(
        UnitControl,
        {
          value,
          units,
          onChange,
          onUnitChange: handleUnitChange,
          min: 0,
          size: "__unstable-large",
          label,
          hideLabelFromVision: true
        }
      ) }),
      /* @__PURE__ */ jsx(FlexItem, { isBlock: true, children: /* @__PURE__ */ jsx(Spacer, { marginX: 2, marginBottom: 0, children: /* @__PURE__ */ jsx(
        RangeControl,
        {
          __next40pxDefaultSize: true,
          value: customRangeValue,
          min: 0,
          max: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.max ?? 100,
          step: RANGE_CONTROL_CUSTOM_SETTINGS[selectedUnit]?.step ?? 0.1,
          withInputField: false,
          onChange: handleSliderChange,
          __nextHasNoMarginBottom: true,
          label,
          hideLabelFromVision: true
        }
      ) }) })
    ] })
  ] });
}
export {
  HeightControl as default
};
//# sourceMappingURL=index.js.map
