const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_Presets = require("./Presets.js");
const require_index = require("../Keyboard/index.js");
const require_index$1 = require("../VirtualKeyInput/index.js");
const require_index$2 = require("../VirtualInput/index.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let ahooks = require("ahooks");
let _pisell_icon_es_Delete = require("@pisell/icon/es/Delete");
_pisell_icon_es_Delete = require_runtime.__toESM(_pisell_icon_es_Delete);
require("./index.less");
//#region src/components/virtual-keyboard/BaseNumberKeyboard/index.tsx
const items = [
	{
		value: 1,
		label: "1",
		disabled: false,
		type: "text"
	},
	{
		value: 2,
		label: "2",
		disabled: false,
		type: "text"
	},
	{
		value: 3,
		label: "3",
		disabled: false,
		type: "text"
	},
	{
		value: 4,
		label: "4",
		disabled: false,
		type: "text"
	},
	{
		value: 5,
		label: "5",
		disabled: false,
		type: "text"
	},
	{
		value: 6,
		label: "6",
		disabled: false,
		type: "text"
	},
	{
		value: 7,
		label: "7",
		disabled: false,
		type: "text"
	},
	{
		value: 8,
		label: "8",
		disabled: false,
		type: "text"
	},
	{
		value: 9,
		label: "9",
		disabled: false,
		type: "text"
	},
	{
		value: "0",
		label: "0",
		disabled: false,
		type: "text"
	},
	{
		value: "00",
		label: "00",
		disabled: false,
		type: "text"
	},
	{
		value: ".",
		label: ".",
		disabled: false,
		type: "text"
	}
];
const BaseNumberKeyboard = (props) => {
	const { onChange, placeholder, format, defaultValue = "", doneText, resetText, max, min, onEnter, presets, defaultSelect, rightItemsStyle, customDisplay, style } = props;
	const [value, setValue] = (0, ahooks.useControllableValue)(props, { defaultValue });
	const [select, setSelect] = (0, react.useState)(defaultSelect !== null && defaultSelect !== void 0 ? defaultSelect : false);
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	const rightItems = (0, react.useMemo)(() => {
		return [
			{
				value: "delete",
				label: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Delete.default, { className: "virtual-keyboard-input-delete-icon" }),
				disabled: false,
				type: "text",
				style: {
					color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || "#000000",
					backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#ffffff"
				}
			},
			{
				value: "reset",
				label: resetText || "Reset",
				disabled: false,
				type: "text",
				style: {
					fontSize: "18px",
					color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.resetButtonTextColor) || "#D92D20",
					backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.resetButtonBackgroundColor) || "#ffffff"
				}
			},
			{
				value: "done",
				label: doneText || "Done",
				disabled: false,
				type: "primary",
				size: 2,
				style: {
					fontSize: "18px",
					background: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.isDoneButtonFollowTheme) ? "var(--theme-color)" : (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.doneButtonBackgroundColor) || "#5d3f9f",
					color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.isDoneButtonFollowTheme) ? "#ffffff" : (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.doneButtonTextColor) || "#ffffff"
				}
			}
		];
	}, [
		doneText,
		resetText,
		rightItemsStyle
	]);
	const itemsWithStyle = (0, react.useMemo)(() => {
		return items.map((item) => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, item), {}, { style: {
			backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
			color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || "#000000"
		} }));
	}, [
		items,
		rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor,
		rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor
	]);
	const checkValue = (val) => {
		if ((0, _pisell_utils.isNumber)(max) && Number(val) > max) {
			setValue(`${Math.min(Number(val), Number(max))}`);
			return { message: "" };
		}
		if ((0, _pisell_utils.isNumber)(min) && Number(val) < min) {
			setValue(`${Math.max(Number(val), Number(min))}`);
			return { message: "" };
		}
	};
	const handleChangeValue = (val) => {
		var _val$target;
		val = typeof val === "string" ? val : (val === null || val === void 0 || (_val$target = val.target) === null || _val$target === void 0 ? void 0 : _val$target.value) || "";
		if (checkValue(val)) return;
		setValue(val);
	};
	const actions = {
		".": (val) => {
			if (value.includes(".")) return;
			actions.default(val);
		},
		delete: () => {
			handleChangeValue(select ? "" : `${value || ""}`.slice(0, -1));
		},
		reset: () => {
			handleChangeValue(`${defaultValue || ""}` || "");
		},
		done: () => {
			onEnter === null || onEnter === void 0 || onEnter(value);
		},
		ok: () => {
			onEnter === null || onEnter === void 0 || onEnter(value);
		},
		default: (val) => {
			handleChangeValue(select ? `${val}` : `${value}${val}`);
		}
	};
	const handleKeyboardChange = (0, ahooks.useMemoizedFn)((val) => {
		return (actions[val] || actions.default)(val);
	});
	const renderDisplayField = () => {
		if (customDisplay) {
			if (typeof customDisplay === "function") return customDisplay({
				value,
				onChange: handleChangeValue,
				onValueSelect: setSelect
			});
			return customDisplay;
		}
		return /* @__PURE__ */ react.default.createElement(require_index$1.default, {
			value,
			onChange: (e) => handleChangeValue(e.target.value),
			renderInput: (props) => {
				if ((0, _pisell_utils.isUndefined)(props.value) || props.value === "") return /* @__PURE__ */ react.default.createElement(require_index$2.default, {
					autoFocus: true,
					placeholder,
					value: props.value
				});
				return (format === null || format === void 0 ? void 0 : format(props.value)) || props.value;
			},
			showDelete: false,
			onValueSelect: setSelect,
			defaultSelect,
			style: {
				backgroundColor: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.buttonBackgroundColor) || "#fff",
				color: (rightItemsStyle === null || rightItemsStyle === void 0 ? void 0 : rightItemsStyle.textColor) || "#000000"
			}
		});
	};
	return /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-virtual-keyboard-base",
		style
	}, renderDisplayField(), /* @__PURE__ */ react.default.createElement(require_Presets.default, {
		presets,
		onChange: handleChangeValue
	}), /* @__PURE__ */ react.default.createElement(require_index.default, require_objectSpread2._objectSpread2({
		items: itemsWithStyle,
		rightItems,
		onChange: handleKeyboardChange
	}, props.keyboardProps || {})));
};
//#endregion
exports.default = BaseNumberKeyboard;
