import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import NumberKeyboard from "../keyboards/numberKeyboard/index.js";
import useThemeTokens from "../../hooks/useThemeTokens.js";
import * as React$1 from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { isMobile } from "@pisell/utils";
import classNames from "classnames";
import "./index.less";
//#region src/pro/NumericStepper/index.tsx
const NumericStepper = ({ value, defaultValue = 0, min = 0, max = Infinity, step = 1, disabled = false, onChange, onLimitExceeded, className, styles, size = "middle", shape = "round", minusIcon, plusIcon, horizontalPadding = 0, variant = "separated", enableInput = true, displayMaxWidth, theme }) => {
	const [open, setOpen] = useState(false);
	const [internalValue, setInternalValue] = useState(value !== void 0 ? value : defaultValue);
	const _isMobile = useMemo(() => isMobile(), [isMobile]);
	const { colorPrimary } = useThemeTokens(theme);
	const [tempValue, setTempValue] = useState("");
	const currentValue = value !== void 0 ? value : internalValue;
	useEffect(() => {
		if (value !== void 0) setInternalValue(value);
	}, [value]);
	const handleValueChange = useCallback((newValue, meta) => {
		const clampedValue = Math.max(min, Math.min(max, newValue));
		if (value === void 0) setInternalValue(clampedValue);
		onChange === null || onChange === void 0 || onChange(clampedValue, meta);
	}, [
		min,
		max,
		value,
		onChange
	]);
	const handleDecrease = useCallback((event) => {
		if (disabled) return;
		const newValue = currentValue - step;
		if (newValue >= min) {
			handleValueChange(newValue, {
				action: "decrease",
				event
			});
			return;
		}
		onLimitExceeded === null || onLimitExceeded === void 0 || onLimitExceeded({
			reason: "min",
			currentValue,
			min,
			max,
			event
		});
	}, [
		currentValue,
		step,
		min,
		max,
		disabled,
		handleValueChange,
		onLimitExceeded
	]);
	const handleIncrease = useCallback((event) => {
		if (disabled) return;
		if (currentValue < min) {
			handleValueChange(min, {
				action: "increase",
				event
			});
			return;
		}
		const newValue = currentValue + step;
		if (newValue <= max) {
			handleValueChange(newValue, {
				action: "increase",
				event
			});
			return;
		}
		onLimitExceeded === null || onLimitExceeded === void 0 || onLimitExceeded({
			reason: "max",
			currentValue,
			min,
			max,
			event
		});
	}, [
		currentValue,
		step,
		min,
		max,
		disabled,
		handleValueChange,
		onLimitExceeded
	]);
	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)), { action: "input" });
			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, { action: "input" });
			setTempValue(currentValue.toString());
		}
	};
	const isDecreaseDisabled = disabled || currentValue <= min;
	const isIncreaseDisabled = disabled || currentValue >= max;
	const isPlusOnly = variant === "capsule" ? false : currentValue === 0 || currentValue === void 0;
	const outOfRange = currentValue < min || currentValue > max;
	const stepperClasses = classNames("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$1.createElement("div", {
		className: "numeric-stepper-button-wrapper numeric-stepper-minus-button-wrapper",
		onClick: handleDecrease,
		style: { paddingLeft: horizontalPadding }
	}, /* @__PURE__ */ React$1.createElement("button", {
		type: "button",
		className: classNames("numeric-stepper-button", "numeric-stepper-minus", { "numeric-stepper-button-disabled": isDecreaseDisabled }),
		disabled
	}, minusIcon || /* @__PURE__ */ React$1.createElement("svg", {
		width: "16",
		height: "16",
		viewBox: "0 0 16 16",
		fill: "none"
	}, /* @__PURE__ */ React$1.createElement("path", {
		d: "M3 8h10",
		stroke: "currentColor",
		strokeWidth: "1.5",
		strokeLinecap: "round"
	}))));
	const _display = useMemo(() => {
		if (isPlusOnly) return null;
		const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? { maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth } : {};
		const displayElement = /* @__PURE__ */ React$1.createElement("span", {
			className: "numeric-stepper-display-wrapper",
			onClick: handleNumberClick,
			style: displayWrapperStyle
		}, /* @__PURE__ */ React$1.createElement("span", { className: classNames("numeric-stepper-display") }, currentValue));
		if (!enableInput) return displayElement;
		if (_isMobile) return displayElement;
		return /* @__PURE__ */ React$1.createElement(NumberKeyboard, {
			max,
			min,
			originalValue: currentValue.toString(),
			defaultValue: currentValue.toString(),
			onEnter: (newValue) => {
				handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue), { action: "input" });
				setOpen(false);
			},
			containerProps: {
				className: "numeric-stepper-keyboard-popover",
				renderType: "popover",
				open,
				onOpenChange: handleOpenChange,
				content: /* @__PURE__ */ React$1.createElement(NumberKeyboard, {
					max,
					min,
					originalValue: currentValue.toString(),
					defaultValue: currentValue.toString(),
					onEnter: (newValue) => {
						handleValueChange === null || handleValueChange === void 0 || handleValueChange(Number(newValue), { action: "input" });
						setOpen(false);
					}
				})
			}
		}, displayElement);
	}, [
		_isMobile,
		open,
		isPlusOnly,
		currentValue,
		handleNumberClick,
		handleOpenChange,
		handleChange,
		max,
		min,
		onChange,
		tempValue,
		enableInput,
		variant,
		displayMaxWidth
	]);
	const _plus = /* @__PURE__ */ React$1.createElement("div", {
		className: "numeric-stepper-button-wrapper numeric-stepper-plus-button-wrapper",
		onClick: handleIncrease,
		style: {
			paddingLeft: isPlusOnly ? horizontalPadding : 0,
			paddingRight: horizontalPadding
		}
	}, /* @__PURE__ */ React$1.createElement("button", {
		type: "button",
		className: classNames("numeric-stepper-button", "numeric-stepper-plus", { "numeric-stepper-button-disabled": isIncreaseDisabled }),
		disabled
	}, plusIcon || /* @__PURE__ */ React$1.createElement("svg", {
		width: "16",
		height: "16",
		viewBox: "0 0 16 16",
		fill: "none"
	}, /* @__PURE__ */ React$1.createElement("path", {
		d: "M8 3v10M3 8h10",
		stroke: "currentColor",
		strokeWidth: "1.5",
		strokeLinecap: "round"
	}))));
	return /* @__PURE__ */ React$1.createElement("div", {
		className: stepperClasses,
		style: _objectSpread2(_objectSpread2({}, (styles === null || styles === void 0 ? void 0 : styles.container) || {}), {}, { ["--color-primary"]: colorPrimary }),
		onClick: (e) => e.stopPropagation()
	}, _minus, _display, _plus, _isMobile && /* @__PURE__ */ React$1.createElement(NumberKeyboard, {
		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), { action: "input" });
			setOpen(false);
		}
	}));
};
//#endregion
export { NumericStepper as default };
