import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import shortcuts_default from "../shortcuts/index.js";
import { setKeyboardTheme } from "../../utils.js";
import CashKeyboardSimple from "./CashKeyboardSimple.js";
import React, { useEffect, useMemo, useState } from "react";
import { Tooltip } from "antd";
import { formatAmountWithOptions, locales } from "@pisell/utils";
import Decimal from "decimal.js";
import { merge, omit } from "lodash";
import { AutoResizeText, Iconfont } from "@pisell/materials";
import { useControllableValue } from "ahooks";
import "./index.less";
//#region src/pro/priceKeyboard/components/cashKeyboard/CashKeyboardIntact.tsx
const CashKeyboardIntact = (props) => {
	var _mergedDisplayField$b, _mergedDisplayField$c, _mergedDisplayField$c2;
	const { amountSymbol, titleArea = {}, displayField = {}, originalValue, presets, style, selectType = "light", placeholder, doneText, resetText, disabled, hiddenChangeDue, shortcutsSize } = props;
	const [internalValue, setInternalValue] = useControllableValue(props);
	const [isShowModal, setIsShowModal] = useState(false);
	const changeDue = useMemo(() => {
		return Math.max(0, new Decimal(internalValue || 0).minus(new Decimal(originalValue || 0)).toNumber());
	}, [internalValue, originalValue]);
	const _restProps = useMemo(() => {
		return omit(props, [
			"defaultValue",
			"value",
			"onChange",
			"onEnter",
			"onReset",
			"style"
		]);
	}, [props]);
	useEffect(() => {
		setKeyboardTheme(selectType);
	}, [selectType]);
	const getDefaultPresets = () => {
		const defaultEndPresets = [
			{
				label: locales.getText("cash-keyboard-other"),
				value: "other",
				style: {
					color: "#344054",
					backgroundColor: "white"
				},
				onClick: () => {
					setIsShowModal(true);
				},
				render: () => /* @__PURE__ */ React.createElement("div", { style: {
					position: "absolute",
					left: 0,
					top: 0,
					bottom: 0,
					right: 0,
					display: "flex",
					alignItems: "center",
					justifyContent: "center"
				} }, locales.getText("cash-keyboard-other"))
			},
			{
				label: resetText || locales.getText("cash-keyboard-reset"),
				value: "reset",
				style: {
					color: "#D92D20",
					backgroundColor: "white"
				},
				onClick: () => {
					var _props$onReset;
					setInternalValue(String(originalValue) || "");
					props === null || props === void 0 || (_props$onReset = props.onReset) === null || _props$onReset === void 0 || _props$onReset.call(props);
				}
			},
			{
				label: doneText || locales.getText("cash-keyboard-pay"),
				value: "pay",
				style: {
					color: "white",
					backgroundColor: "#7F56DA",
					gridColumn: "span 2"
				},
				onClick: () => {
					var _props$onEnter;
					(_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 || _props$onEnter.call(props, internalValue);
				}
			}
		];
		const userPresets = presets || [];
		const maxUserPresets = 7 - defaultEndPresets.length;
		return [...userPresets.slice(0, maxUserPresets), ...defaultEndPresets];
	};
	const getDefaultDisplayField = () => {
		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: [
				1,
				2,
				1
			]
		};
	};
	const mergedTitleArea = merge({}, {
		visible: true,
		title: { visible: true },
		subtitle: { visible: true },
		alignment: "space-between",
		padding: "0px"
	}, titleArea);
	const mergedDisplayField = merge({}, getDefaultDisplayField(), displayField);
	const renderTitleArea = () => {
		var _mergedTitleArea$titl, _mergedTitleArea$subt;
		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,
			marginBottom: "8"
		};
		return /* @__PURE__ */ React.createElement("div", { style: titleStyle }, ((_mergedTitleArea$titl = mergedTitleArea.title) === null || _mergedTitleArea$titl === void 0 ? void 0 : _mergedTitleArea$titl.visible) && /* @__PURE__ */ React.createElement("div", {
			className: "pisell-cash-keyboard-title",
			style: {
				fontSize: mergedTitleArea.title.fontSize,
				color: mergedTitleArea.title.color,
				fontWeight: mergedTitleArea.title.fontWeight
			}
		}, mergedTitleArea.title.text), ((_mergedTitleArea$subt = mergedTitleArea.subtitle) === null || _mergedTitleArea$subt === void 0 ? void 0 : _mergedTitleArea$subt.visible) && /* @__PURE__ */ React.createElement("div", {
			className: "pisell-cash-keyboard-subtitle",
			style: {
				fontSize: mergedTitleArea.subtitle.fontSize,
				color: mergedTitleArea.subtitle.color,
				fontWeight: mergedTitleArea.subtitle.fontWeight
			}
		}, mergedTitleArea.subtitle.text));
	};
	const getGridStyle = (index) => {
		if (!mergedDisplayField.gridRatio) return { flex: 1 };
		return { flex: mergedDisplayField.gridRatio[index] || 1 };
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
		className: `pisell-cash-keyboard pisell-cash-keyboard-intact ${disabled ? "disabled" : ""}`,
		style: _objectSpread2({}, style || {})
	}, renderTitleArea(), /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container" }, /* @__PURE__ */ React.createElement("div", { style: {
		display: "flex",
		gap: "16px"
	} }, ((_mergedDisplayField$b = mergedDisplayField.balanceDue) === null || _mergedDisplayField$b === void 0 ? void 0 : _mergedDisplayField$b.visible) && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-cash-keyboard-intact-container-top",
		style: _objectSpread2(_objectSpread2({}, getGridStyle(0)), {}, { overflow: "hidden" })
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-label" }, mergedDisplayField.balanceDue.label), /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-value" }, /* @__PURE__ */ React.createElement(Tooltip, { title: formatAmountWithOptions(originalValue || "", amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		showCurrencySymbol: true
	}) }, /* @__PURE__ */ React.createElement(AutoResizeText, {
		minFontSizePx: 10,
		maxFontSizePx: 18,
		fontSizePrecisionPx: .5
	}, formatAmountWithOptions(originalValue || "", amountSymbol, {
		precision: 2,
		hideDecimalForWholeNumbers: false,
		showCurrencySymbol: true
	}))))), ((_mergedDisplayField$c = mergedDisplayField.cashReceived) === null || _mergedDisplayField$c === void 0 ? void 0 : _mergedDisplayField$c.visible) && /* @__PURE__ */ React.createElement("div", {
		style: _objectSpread2(_objectSpread2({}, getGridStyle(1)), {}, {
			padding: "0px 16px",
			borderRadius: "8px",
			backgroundColor: "white",
			boxShadow: "inset 0 2px 4px rgba(16, 24, 40, 0.08), inset 0 -2px 4px rgba(16, 24, 40, 0.08), inset 2px 0 4px rgba(16, 24, 40, 0.08), inset -2px 0 4px rgba(16, 24, 40, 0.08)",
			overflow: "hidden",
			maxWidth: 188,
			cursor: "pointer",
			border: "1px solid #7f56da",
			borderBottom: "1px solid #7f56da"
		}),
		onClick: () => {
			setIsShowModal(true);
		}
	}, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-cash-keyboard-intact-container-top",
		style: _objectSpread2(_objectSpread2({}, getGridStyle(0)), {}, {
			overflow: "hidden",
			padding: "5px 0"
		})
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-label" }, mergedDisplayField.cashReceived.label), /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-value" }, /* @__PURE__ */ React.createElement(AutoResizeText, {
		minFontSizePx: 10,
		maxFontSizePx: 18,
		fontSizePrecisionPx: .5,
		style: {
			color: "#7f56da",
			textDecoration: "underline",
			textUnderlineOffset: "3px"
		}
	}, internalValue ? formatAmountWithOptions(internalValue || "", amountSymbol, {
		value: internalValue,
		hideDecimalForWholeNumbers: false,
		precision: 2,
		showCurrencySymbol: true
	}) : ""), /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-edit-05",
		style: {
			color: "#7f56da",
			fontSize: "18px",
			marginLeft: "4px",
			marginTop: "4px"
		}
	})))), ((_mergedDisplayField$c2 = mergedDisplayField.changeDue) === null || _mergedDisplayField$c2 === void 0 ? void 0 : _mergedDisplayField$c2.visible) && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-cash-keyboard-intact-container-top",
		style: _objectSpread2(_objectSpread2({}, getGridStyle(2)), {}, { overflow: "hidden" })
	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-label" }, mergedDisplayField.changeDue.label), /* @__PURE__ */ React.createElement("div", { className: "pisell-cash-keyboard-intact-container-top-value" }, /* @__PURE__ */ React.createElement(Tooltip, { title: formatAmountWithOptions(hiddenChangeDue ? 0 : changeDue, amountSymbol, {
		value: hiddenChangeDue ? 0 : changeDue,
		showCurrencySymbol: true,
		hideDecimalForWholeNumbers: false,
		precision: 2
	}) }, /* @__PURE__ */ React.createElement(AutoResizeText, {
		minFontSizePx: 10,
		maxFontSizePx: 18,
		fontSizePrecisionPx: .5
	}, formatAmountWithOptions(hiddenChangeDue ? 0 : changeDue, amountSymbol, {
		value: hiddenChangeDue ? 0 : changeDue,
		showCurrencySymbol: true,
		hideDecimalForWholeNumbers: false,
		precision: 2
	})))))), /* @__PURE__ */ React.createElement(shortcuts_default, {
		size: shortcutsSize || "default",
		presets: getDefaultPresets(),
		onChange: setInternalValue,
		disabled
	}))), /* @__PURE__ */ React.createElement(CashKeyboardSimple, _objectSpread2(_objectSpread2({ containerProps: {
		renderType: "modal",
		open: isShowModal,
		onCancel: () => setIsShowModal(false)
	} }, _restProps), {}, {
		titleArea: _objectSpread2(_objectSpread2({}, mergedTitleArea), {}, { subtitle: { visible: false } }),
		selectType: "dark",
		value: internalValue,
		onChange: setInternalValue,
		onEnter: () => {
			var _props$onEnter2;
			(_props$onEnter2 = props.onEnter) === null || _props$onEnter2 === void 0 || _props$onEnter2.call(props, internalValue);
			setIsShowModal(false);
		}
	})));
};
//#endregion
export { CashKeyboardIntact as default };
