const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_useEngineContext = require("../../hooks/useEngineContext.js");
const require_index = require("../../utils/index.js");
const require_locales = require("./locales.js");
const require_hooks = require("./hooks.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_utils = require("@pisell/utils");
let _pisell_materials = require("@pisell/materials");
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/pinVerifyModal/index.tsx
const PinVerifyModal = (props, ref) => {
	var _context$engine, _context$appHelper, _context$appHelper2, _context$appHelper2$i, _context$appHelper3, _modalParamsRef$curre2, _modalParamsRef$curre3, _modalParamsRef$curre4;
	const context = require_useEngineContext.default();
	_pisell_utils.locales.init(require_locales.default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	require_index.request.setRequest(context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.request);
	const isTerminal = context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$i = _context$appHelper2.isTerminal) === null || _context$appHelper2$i === void 0 ? void 0 : _context$appHelper2$i.call(_context$appHelper2);
	context === null || context === void 0 || (_context$appHelper3 = context.appHelper) === null || _context$appHelper3 === void 0 || (_context$appHelper3 = _context$appHelper3.constants) === null || _context$appHelper3 === void 0 || _context$appHelper3.platform;
	const [visible, setVisible] = (0, react.useState)(false);
	const modalParamsRef = (0, react.useRef)({});
	const [pin, setPin] = (0, react.useState)("");
	const { verifyPin, loading, verifyInfo, setVerifyInfo } = require_hooks.usePinVerify();
	const KeyboardItems = (0, react.useMemo)(() => {
		return [
			{
				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: "delete",
				label: /* @__PURE__ */ react.default.createElement(_pisell_icon_es_Delete.default, { className: "virtual-keyboard-input-delete-icon" }),
				disabled: false,
				type: "text"
			},
			{
				value: 0,
				label: "0",
				disabled: false,
				type: "text"
			},
			{
				value: "verify",
				label: _pisell_utils.locales.getText("pisell2.pin.verify.modal.keyboard.verify"),
				disabled: false,
				type: "primary"
			}
		];
	}, [_pisell_utils.locales]);
	const onOpen = (params) => {
		var _props$onOpen;
		modalParamsRef.current = params;
		setVerifyInfo({
			failed_count: (params === null || params === void 0 ? void 0 : params.failed_count) || 0,
			check_max_count: (params === null || params === void 0 ? void 0 : params.check_max_count) || 0
		});
		setVisible(true);
		(_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 || _props$onOpen.call(props);
	};
	const onClose = () => {
		var _props$onClose;
		modalParamsRef.current = {};
		setPin("");
		setVerifyInfo(null);
		setVisible(false);
		(_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props);
	};
	(0, react.useImperativeHandle)(ref, () => ({
		open: onOpen,
		close: onClose
	}));
	const handleChange = (e) => {
		if (e === "delete") {
			setPin(pin.slice(0, -1));
			return;
		} else if (e === "verify") {
			handleVerify();
			return;
		} else if (pin.length < 4) setPin(pin + e);
	};
	const handleVerify = () => {
		if (loading) return;
		if (pin.length === 4) {
			var _modalParamsRef$curre;
			verifyPin({
				wallet_detail_id: (_modalParamsRef$curre = modalParamsRef.current) === null || _modalParamsRef$curre === void 0 ? void 0 : _modalParamsRef$curre.wallet_detail_id,
				pin
			}, (params) => {
				var _props$onSuccess;
				(_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 || _props$onSuccess.call(props, params);
				onClose();
			});
		} else (0, _pisell_materials.PisellToast)({
			content: _pisell_utils.locales.getText("pisell2.pin.verify.modal.keyboard.title"),
			duration: 2
		});
	};
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		platform: isTerminal ? "h5" : void 0,
		visible,
		title: _pisell_utils.locales.getText("pisell2.pin.verify.modal.title"),
		headerDivider: false,
		footer: null,
		onClose,
		maskClosable: false,
		onCancel: onClose,
		destroyOnClose: true,
		mobileModalHeight: isTerminal ? void 0 : "auto"
	}, /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content" }, /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-user" }, /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-user-avatar" }, /* @__PURE__ */ react.default.createElement("img", {
		src: ((_modalParamsRef$curre2 = modalParamsRef.current.customer) === null || _modalParamsRef$curre2 === void 0 ? void 0 : _modalParamsRef$curre2.cover) || "https://file.mypisell.com/static/default_product.png",
		alt: "avatar",
		className: "pin-verify-modal-content-user-avatar-img"
	})), /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-user-right" }, /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-user-right-name" }, ((_modalParamsRef$curre3 = modalParamsRef.current.customer) === null || _modalParamsRef$curre3 === void 0 ? void 0 : _modalParamsRef$curre3.display_name) || ((_modalParamsRef$curre4 = modalParamsRef.current.customer) === null || _modalParamsRef$curre4 === void 0 ? void 0 : _modalParamsRef$curre4.nickname)), /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-user-right-wallet" }, _pisell_utils.locales.getText("pisell2.pin.verify.modal.wallet"), modalParamsRef.current.wallet_code))), /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-keyboard" }, /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-keyboard-title" }, _pisell_utils.locales.getText("pisell2.pin.verify.modal.keyboard.title")), /* @__PURE__ */ react.default.createElement(_pisell_materials.VirtualKeyboard, {
		style: { width: "300px" },
		keyboardProps: {
			keydown: false,
			items: KeyboardItems,
			onChange: handleChange
		},
		virtualKeyInputProps: {
			value: pin,
			onChange: (e) => {
				setPin(e.target.value);
			},
			placeholder: "0000",
			style: {
				height: "45px",
				fontSize: "36px"
			}
		}
	}), (verifyInfo === null || verifyInfo === void 0 ? void 0 : verifyInfo.check_max_count) ? /* @__PURE__ */ react.default.createElement("div", { className: "pin-verify-modal-content-keyboard-desc" }, _pisell_utils.locales.getText("pisell2.pin.verify.modal.keyboard.desc"), verifyInfo === null || verifyInfo === void 0 ? void 0 : verifyInfo.remaining_count, "/", verifyInfo === null || verifyInfo === void 0 ? void 0 : verifyInfo.check_max_count) : null)));
};
var pinVerifyModal_default = (0, react.forwardRef)(PinVerifyModal);
//#endregion
exports.default = pinVerifyModal_default;
