import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import Presets from "./Presets.js";
import Keyboard_default from "../Keyboard/index.js";
import VirtualKeyInput from "../VirtualKeyInput/index.js";
import VirtualInput from "../VirtualInput/index.js";
import React, { useEffect, useMemo, useState } from "react";
import { isNumber, isUndefined } from "@pisell/utils";
import { useControllableValue, useMemoizedFn } from "ahooks";
import Delete from "@pisell/icon/es/Delete";
import "./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] = useControllableValue(props, { defaultValue });
	const [select, setSelect] = useState(defaultSelect !== null && defaultSelect !== void 0 ? defaultSelect : false);
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const rightItems = useMemo(() => {
		return [
			{
				value: "delete",
				label: /* @__PURE__ */ React.createElement(Delete, { 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 = useMemo(() => {
		return items.map((item) => _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 (isNumber(max) && Number(val) > max) {
			setValue(`${Math.min(Number(val), Number(max))}`);
			return { message: "" };
		}
		if (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 = 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.createElement(VirtualKeyInput, {
			value,
			onChange: (e) => handleChangeValue(e.target.value),
			renderInput: (props) => {
				if (isUndefined(props.value) || props.value === "") return /* @__PURE__ */ React.createElement(VirtualInput, {
					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.createElement("div", {
		className: "pisell-virtual-keyboard-base",
		style
	}, renderDisplayField(), /* @__PURE__ */ React.createElement(Presets, {
		presets,
		onChange: handleChangeValue
	}), /* @__PURE__ */ React.createElement(Keyboard_default, _objectSpread2({
		items: itemsWithStyle,
		rightItems,
		onChange: handleKeyboardChange
	}, props.keyboardProps || {})));
};
//#endregion
export { BaseNumberKeyboard as default };
