import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import shortcuts_default from "../shortcuts/index.js";
import useRightItems from "../../hooks/rightItems.js";
import useKeyActions from "../../hooks/keyActions.js";
import { setKeyboardTheme } from "../../utils.js";
import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import { Popover } from "antd";
import { locales } from "@pisell/utils";
import Decimal from "decimal.js";
import { merge } from "lodash";
import { Keyboard, PisellModal, PisellText, VirtualInput } from "@pisell/materials";
import { useControllableValue } from "ahooks";
import "./index.less";
//#region src/pro/priceKeyboard/components/cashKeyboard/CashKeyboardSimple.tsx
const _excluded = ["containerProps", "children"], _excluded2 = ["renderType", "open"];
const CashKeyboardBase = (props) => {
	var _mergedDisplayField$c, _mergedDisplayField$b, _mergedDisplayField$c2;
	const { amountSymbol, titleArea, originalValue = "", displayField, presets, keyboardProps, style, min, max, selectType = "light", placeholder = "", doneText, resetText } = props;
	const [internalValue, setInternalValue] = useControllableValue(props);
	const uniqueKeyboardId = `virtual-keyboard-${useId().replace(/:/g, "-")}`;
	const shortcutsRef = useRef(null);
	const [isFirstInput, setIsFirstInput] = useState(true);
	const changeDue = useMemo(() => {
		return Math.max(0, new Decimal(internalValue || 0).minus(new Decimal(originalValue || 0)).toNumber());
	}, [internalValue, originalValue]);
	useEffect(() => {
		setKeyboardTheme(selectType);
	}, [selectType]);
	const onReset = useCallback(() => {
		var _props$onReset;
		setInternalValue(String(originalValue));
		setIsFirstInput(true);
		props === null || props === void 0 || (_props$onReset = props.onReset) === null || _props$onReset === void 0 || _props$onReset.call(props);
	}, [
		props === null || props === void 0 ? void 0 : props.onReset,
		setInternalValue,
		originalValue
	]);
	const _handleValChange = useCallback((val) => {
		setInternalValue(val);
		setIsFirstInput(false);
	}, []);
	const { handleChange } = useKeyActions({
		onEnter: props.onEnter,
		onReset,
		onChange: _handleValChange,
		value: internalValue,
		min,
		max,
		scale: 2,
		mode: isFirstInput ? "replace" : "append"
	});
	const rightItems = useRightItems({
		rightItemsStyle: {},
		doneText: doneText || locales.getText("cash-keyboard-pay"),
		resetText: resetText || locales.getText("cash-keyboard-reset")
	});
	const getDefaultPresets = useCallback(() => {
		const limitedPresets = (presets || []).slice(0, 4);
		while (limitedPresets.length < 4) limitedPresets.push({
			label: "",
			value: "",
			style: {
				visibility: "hidden",
				pointerEvents: "none"
			}
		});
		return limitedPresets;
	}, [presets]);
	const getDefaultDisplayField = useCallback(() => {
		return {
			cashReceived: {
				visible: true,
				label: locales.getText("cash-keyboard-cash-received")
			},
			balanceDue: {
				visible: true,
				label: locales.getText("cash-keyboard-balance-due")
			},
			changeDue: {
				visible: true,
				label: locales.getText("cash-keyboard-change-due")
			},
			gridRatio: [
				2,
				1,
				1
			]
		};
	}, []);
	const defaultTitleArea = {
		title: { visible: true },
		subtitle: { visible: true },
		alignment: "space-between",
		padding: "0px"
	};
	const mergedTitleArea = useMemo(() => merge({}, defaultTitleArea, titleArea), [titleArea]);
	const mergedDisplayField = useMemo(() => merge({}, getDefaultDisplayField(), displayField), [getDefaultDisplayField, displayField]);
	const renderTitleArea = useCallback(() => {
		const { title, subtitle } = mergedTitleArea || {};
		if (!(title === null || title === void 0 ? void 0 : title.visible) && !(subtitle === null || subtitle === void 0 ? void 0 : subtitle.visible)) return null;
		if (!(title === null || title === void 0 ? void 0 : title.text) && !(subtitle === null || subtitle === void 0 ? void 0 : subtitle.text)) return null;
		const titleStyle = {
			display: "flex",
			justifyContent: mergedTitleArea.alignment,
			alignItems: "center",
			padding: mergedTitleArea.padding
		};
		return /* @__PURE__ */ React.createElement("div", {
			style: titleStyle,
			className: "pisell-cash-keyboard-title"
		}, (title === null || title === void 0 ? void 0 : title.visible) && /* @__PURE__ */ React.createElement("div", { style: {
			fontSize: title.fontSize,
			color: title.color,
			fontWeight: title.fontWeight
		} }, title.text), (subtitle === null || subtitle === void 0 ? void 0 : subtitle.visible) && /* @__PURE__ */ React.createElement("div", {
			className: "pisell-cash-keyboard-subtitle",
			style: {
				fontSize: subtitle.fontSize,
				color: subtitle.color,
				fontWeight: subtitle.fontWeight
			}
		}, mergedTitleArea.subtitle.text));
	}, [mergedTitleArea]);
	const getGridStyle = useCallback((index) => {
		if (!mergedDisplayField.gridRatio) return { flex: 1 };
		return { flex: mergedDisplayField.gridRatio[index] || 1 };
	}, [mergedDisplayField]);
	return /* @__PURE__ */ React.createElement("div", {
		className: "pisell-cash-keyboard pisell-cash-keyboard-simple",
		style: _objectSpread2({}, style || {})
	}, renderTitleArea(), /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		gap: "8px"
	} }, ((_mergedDisplayField$c = mergedDisplayField.cashReceived) === null || _mergedDisplayField$c === void 0 ? void 0 : _mergedDisplayField$c.visible) && /* @__PURE__ */ React.createElement(VirtualInput, {
		focused: true,
		wrapperStyle: _objectSpread2(_objectSpread2({
			padding: "12px 20px",
			borderRadius: "8px",
			backgroundColor: "white",
			boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.06)"
		}, getGridStyle(0)), {}, { overflow: "hidden" }),
		topContent: /* @__PURE__ */ React.createElement("div", { style: {
			color: "#667085",
			fontSize: "12px",
			fontWeight: 500,
			lineHeight: "18px"
		} }, mergedDisplayField.cashReceived.label),
		value: internalValue ? `${amountSymbol || ""}${internalValue}` : "",
		placeholder,
		style: {
			fontSize: "24px",
			fontWeight: "bold",
			border: "none",
			background: "transparent",
			width: "100%"
		},
		preventBlurElements: [`#${uniqueKeyboardId}`, shortcutsRef],
		selected: isFirstInput && !!internalValue
	}), /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		flexDirection: "column",
		flex: 1,
		borderRadius: "8px",
		backgroundColor: "#ffffff",
		padding: 8,
		boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.06)",
		overflow: "hidden"
	} }, ((_mergedDisplayField$b = mergedDisplayField.balanceDue) === null || _mergedDisplayField$b === void 0 ? void 0 : _mergedDisplayField$b.visible) && /* @__PURE__ */ React.createElement("div", { style: _objectSpread2({}, getGridStyle(1)) }, /* @__PURE__ */ React.createElement("div", { style: {
		color: "#667085",
		fontSize: "12px",
		fontWeight: 500,
		lineHeight: "18px"
	} }, mergedDisplayField.balanceDue.label), /* @__PURE__ */ React.createElement("div", { style: {
		color: "#475467",
		fontSize: "14px",
		fontWeight: 700,
		lineHeight: "20px"
	} }, /* @__PURE__ */ React.createElement(PisellText.Amount, {
		value: originalValue,
		hideDecimalForWholeNumbers: false,
		precision: 2
	}))), ((_mergedDisplayField$c2 = mergedDisplayField.changeDue) === null || _mergedDisplayField$c2 === void 0 ? void 0 : _mergedDisplayField$c2.visible) && /* @__PURE__ */ React.createElement("div", { style: _objectSpread2({}, getGridStyle(2)) }, /* @__PURE__ */ React.createElement("div", { style: {
		color: "#667085",
		fontSize: "12px",
		fontWeight: 500,
		lineHeight: "18px"
	} }, mergedDisplayField.changeDue.label), /* @__PURE__ */ React.createElement("div", { style: {
		color: "#475467",
		fontSize: "14px",
		fontWeight: 700,
		lineHeight: "20px"
	} }, /* @__PURE__ */ React.createElement(PisellText.Amount, {
		value: changeDue,
		hideDecimalForWholeNumbers: false,
		precision: 2
	}))))), /* @__PURE__ */ React.createElement(shortcuts_default, {
		ref: shortcutsRef,
		presets: getDefaultPresets(),
		onChange: (v) => {
			setInternalValue(v);
		}
	}), /* @__PURE__ */ React.createElement(Keyboard, _objectSpread2(_objectSpread2({}, keyboardProps), {}, {
		rightItems,
		onChange: handleChange,
		id: uniqueKeyboardId
	})));
};
const CashKeyboardSimple = (props) => {
	const { containerProps, children } = props, keyboardProps = _objectWithoutProperties(props, _excluded);
	const _ref = containerProps || {}, { renderType, open } = _ref, restProps = _objectWithoutProperties(_ref, _excluded2);
	if (!containerProps) return /* @__PURE__ */ React.createElement(CashKeyboardBase, keyboardProps);
	if (renderType === "popover") return /* @__PURE__ */ React.createElement(Popover, _objectSpread2(_objectSpread2({
		key: `${open}`,
		open,
		trigger: "click",
		className: "pisell-cash-keyboard-container pisell-cash-keyboard-popover"
	}, restProps), {}, { content: /* @__PURE__ */ React.createElement(CashKeyboardBase, keyboardProps) }), children);
	if (renderType === "modal") return open ? /* @__PURE__ */ React.createElement(PisellModal, _objectSpread2({
		platform: "pc",
		open: true,
		width: "unset",
		header: null,
		footer: false,
		mask: false,
		maskClosable: true,
		bodyStyle: {
			padding: "0px",
			backgroundColor: "transparent"
		},
		closeIcon: null,
		className: "pisell-payment-keyboard-container pisell-payment-keyboard-modal",
		destroyOnHidden: true
	}, restProps), /* @__PURE__ */ React.createElement(CashKeyboardBase, keyboardProps)) : null;
	return /* @__PURE__ */ React.createElement(CashKeyboardBase, keyboardProps);
};
//#endregion
export { CashKeyboardSimple as default };
