const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_index = require("../keyboards/numberKeyboard/index.js");
const require_useThemeTokens = require("../../hooks/useThemeTokens.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
require("./index.less");
//#region src/pro/NumericStepper/index.tsx
const NumericStepper = ({ value, defaultValue = 0, min = 0, max = Infinity, step = 1, disabled = false, onChange, className, styles, size = "middle", shape = "round", minusIcon, plusIcon, horizontalPadding = 0, variant = "separated", enableInput = true, displayMaxWidth, theme, plusOnlyAtZero = true }) => {
	const [open, setOpen] = (0, react.useState)(false);
	const [internalValue, setInternalValue] = (0, react.useState)(value !== void 0 ? value : defaultValue);
	const _isMobile = (0, react.useMemo)(() => (0, _pisell_utils.isMobile)(), [_pisell_utils.isMobile]);
	const { colorPrimary } = require_useThemeTokens.default(theme);
	const [tempValue, setTempValue] = (0, react.useState)("");
	const currentValue = value !== void 0 ? value : internalValue;
	(0, react.useEffect)(() => {
		if (value !== void 0) setInternalValue(value);
	}, [value]);
	const handleValueChange = (0, react.useCallback)((newValue) => {
		const clampedValue = Math.max(min, Math.min(max, newValue));
		if (value === void 0) setInternalValue(clampedValue);
		onChange === null || onChange === void 0 || onChange(clampedValue);
	}, [
		min,
		max,
		value,
		onChange
	]);
	const handleDecrease = (0, react.useCallback)(() => {
		if (disabled) return;
		const newValue = currentValue - step;
		if (newValue >= min) handleValueChange(newValue);
	}, [
		currentValue,
		step,
		min,
		disabled,
		handleValueChange
	]);
	const handleIncrease = (0, react.useCallback)(() => {
		if (disabled) return;
		if (currentValue < min) {
			handleValueChange(min);
			return;
		}
		const newValue = currentValue + step;
		if (newValue <= max) handleValueChange(newValue);
	}, [
		currentValue,
		step,
		min,
		max,
		disabled,
		handleValueChange
	]);
	const handleChange = (e) => {
		if (!e) {
			setTempValue(min.toString());
			return;
		}
		if (e === "delete") {
			setTempValue(tempValue.slice(0, -1) || "0");
			return;
		} else if (e === "verify") {
			onChange === null || onChange === void 0 || onChange(Math.max(min, Math.min(max, parseInt(tempValue) || 0)));
			setOpen(false);
			return;
		} else setTempValue(e);
	};
	const handleNumberClick = () => {
		if (disabled || !enableInput) return;
		setTempValue(currentValue.toString());
		if (_isMobile) setOpen(true);
	};
	const handleOpenChange = (visible) => {
		setOpen(visible);
		if (visible) setTempValue(currentValue.toString());
		else {
			const clampedValue = Math.max(min, Math.min(max, parseInt(tempValue) || 0));
			if (clampedValue !== value) onChange === null || onChange === void 0 || onChange(clampedValue);
			setTempValue(currentValue.toString());
		}
	};
	const isDecreaseDisabled = disabled || currentValue <= min;
	const isIncreaseDisabled = disabled || currentValue >= max;
	const isPlusOnly = variant === "capsule" ? false : Boolean(plusOnlyAtZero && (currentValue === 0 || currentValue === void 0));
	const outOfRange = currentValue < min || currentValue > max;
	const stepperClasses = (0, classnames.default)("numeric-stepper", `numeric-stepper-${size}`, `numeric-stepper-${variant}`, {
		[`numeric-stepper-${shape}`]: variant === "separated",
		"numeric-stepper-disabled": disabled,
		"numeric-stepper-simple": currentValue === 0 || currentValue === void 0,
		"numeric-stepper-out-of-range": outOfRange,
		"numeric-stepper-plus-only": isPlusOnly,
		"numeric-stepper-input-disabled": !enableInput
	}, className);
	const _minus = !isPlusOnly && /* @__PURE__ */ react.createElement("div", {
		className: "numeric-stepper-button-wrapper numeric-stepper-minus-button-wrapper",
		onClick: handleDecrease,
		style: { paddingLeft: horizontalPadding }
	}, /* @__PURE__ */ react.createElement("button", {
		type: "button",
		className: (0, classnames.default)("numeric-stepper-button", "numeric-stepper-minus", { "numeric-stepper-button-disabled": isDecreaseDisabled }),
		disabled: isDecreaseDisabled
	}, minusIcon || /* @__PURE__ */ react.createElement("svg", {
		width: "16",
		height: "16",
		viewBox: "0 0 16 16",
		fill: "none"
	}, /* @__PURE__ */ react.createElement("path", {
		d: "M3 8h10",
		stroke: "currentColor",
		strokeWidth: "1.5",
		strokeLinecap: "round"
	}))));
	const _display = (0, react.useMemo)(() => {
		if (isPlusOnly) return null;
		const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? { maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth } : {};
		const displayElement = /* @__PURE__ */ react.createElement("span", {
			className: "numeric-stepper-display-wrapper",
			onClick: handleNumberClick,
			style: displayWrapperStyle
		}, /* @__PURE__ */ react.createElement("span", { className: (0, classnames.default)("numeric-stepper-display") }, currentValue));
		if (!enableInput) return displayElement;
		if (_isMobile) return displayElement;
		return /* @__PURE__ */ react.createElement(require_index.default, {
			max,
			min,
			originalValue: currentValue.toString(),
			defaultValue: currentValue.toString(),
			onEnter: (newValue) => {
				handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
				setOpen(false);
			},
			containerProps: {
				className: "numeric-stepper-keyboard-popover",
				renderType: "popover",
				open,
				onOpenChange: handleOpenChange,
				content: /* @__PURE__ */ react.createElement(require_index.default, {
					max,
					min,
					originalValue: currentValue.toString(),
					defaultValue: currentValue.toString(),
					onEnter: (newValue) => {
						handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
						setOpen(false);
					}
				})
			}
		}, displayElement);
	}, [
		_isMobile,
		open,
		isPlusOnly,
		currentValue,
		handleNumberClick,
		handleOpenChange,
		handleChange,
		max,
		min,
		onChange,
		tempValue,
		enableInput,
		variant,
		displayMaxWidth
	]);
	const _plus = /* @__PURE__ */ react.createElement("div", {
		className: "numeric-stepper-button-wrapper numeric-stepper-plus-button-wrapper",
		onClick: handleIncrease,
		style: {
			paddingLeft: isPlusOnly ? horizontalPadding : 0,
			paddingRight: horizontalPadding
		}
	}, /* @__PURE__ */ react.createElement("button", {
		type: "button",
		className: (0, classnames.default)("numeric-stepper-button", "numeric-stepper-plus", { "numeric-stepper-button-disabled": isIncreaseDisabled }),
		disabled: isIncreaseDisabled
	}, plusIcon || /* @__PURE__ */ react.createElement("svg", {
		width: "16",
		height: "16",
		viewBox: "0 0 16 16",
		fill: "none"
	}, /* @__PURE__ */ react.createElement("path", {
		d: "M8 3v10M3 8h10",
		stroke: "currentColor",
		strokeWidth: "1.5",
		strokeLinecap: "round"
	}))));
	return /* @__PURE__ */ react.createElement("div", {
		className: stepperClasses,
		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, (styles === null || styles === void 0 ? void 0 : styles.container) || {}), {}, { ["--color-primary"]: colorPrimary }),
		onClick: (e) => e.stopPropagation()
	}, _minus, _display, _plus, _isMobile && /* @__PURE__ */ react.createElement(require_index.default, {
		containerProps: {
			className: "numeric-stepper-keyboard-modal",
			renderType: "modal",
			open,
			onCancel: () => {
				setOpen(false);
			}
		},
		max,
		min,
		defaultValue: currentValue.toString(),
		originalValue: currentValue.toString(),
		onEnter: (newValue) => {
			handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue));
			setOpen(false);
		}
	}));
};
//#endregion
exports.default = NumericStepper;
