const require_runtime = require("../../../_virtual/_rolldown/runtime.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");
require("./index.less");
//#region src/components/eftposPay/huifu/Action.tsx
const NativeDeviceStatus = ({ type, status }) => {
	const iconType = type === "scanner" ? "pisell2-Scanner" : "pisell2-camera";
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-status" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
		type: iconType,
		style: { fontSize: "40px" }
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-status-wrapper" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
		style: {
			borderRadius: "50%",
			background: status ? "#17B26A" : "#F04438",
			color: "#fff"
		},
		type: status ? "pisell2-check" : "pisell2-x-close"
	})));
};
const DEFAULT_SCANNER_CLASS = "pisell-eftpos-pay-huifu-scan-content-scanner";
const ScanAction = ({ isNativeApp, onClose, onPayClick, onScanCallback }) => {
	const { scannerStatus } = require_hooks.useScannerDevice();
	const { cameraStatus, activeCamera } = require_hooks.useCameraDevice();
	const { scanResult } = require_hooks.useScanListener();
	const [inputValue, setInputValue] = (0, react.useState)("");
	(0, react.useEffect)(() => {
		if (!!(scanResult === null || scanResult === void 0 ? void 0 : scanResult.value)) onScanCallback(scanResult.value);
	}, [scanResult]);
	return /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan" }, !isNativeApp ? /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-header" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-header-title" }, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.title")), /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-header-close",
		onClick: onClose
	}, /* @__PURE__ */ react.default.createElement(_pisell_materials.Iconfont, {
		type: "pisell2-x-close",
		style: { fontSize: "24px" }
	})), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-header-divider" })) : null, /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-content",
		style: { paddingTop: isNativeApp ? "0" : "24px" }
	}, !!isNativeApp && /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-title" }, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.title")), /* @__PURE__ */ react.default.createElement("div", { className: `${DEFAULT_SCANNER_CLASS} ${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}` }, /* @__PURE__ */ react.default.createElement(NativeDeviceStatus, {
		type: "scanner",
		status: scannerStatus
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-scanner-right" }, /* @__PURE__ */ react.default.createElement("span", { className: `${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}-title` }, scannerStatus ? _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.gun.connected") : _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.gun.not-connected")), /* @__PURE__ */ react.default.createElement("span", { className: `${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}-desc` }, scannerStatus ? _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.gun.connected-desc") : _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.gun.not-connected-desc")))), cameraStatus && /* @__PURE__ */ react.default.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-content-camera",
		onClick: activeCamera
	}, /* @__PURE__ */ react.default.createElement(NativeDeviceStatus, {
		type: "camera",
		status: cameraStatus
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-camera-right" }, /* @__PURE__ */ react.default.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-content-camera-title" }, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.camera-title")), /* @__PURE__ */ react.default.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-content-camera-desc" }, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.camera-desc")))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper-title" }, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.input-title")), /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
		placeholder: _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.input-placeholder"),
		maxLength: 18,
		style: {
			width: "100%",
			fontSize: "16px"
		},
		size: "large",
		value: inputValue,
		onChange: (e) => {
			var _e$target;
			const value = (e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || "";
			if (/^[0-9]*$/.test(value) && (value === null || value === void 0 ? void 0 : value.length) <= 18) setInputValue(value);
		}
	}), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper-tip" }, "💡", _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.input-tip")))), /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-footer" }, /* @__PURE__ */ react.default.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-footer-divider" }), /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "default",
		block: true,
		size: "large",
		className: "pisell-eftpos-pay-huifu-scan-footer-button",
		onClick: onClose
	}, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.cancel")), /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "primary",
		block: true,
		size: "large",
		disabled: !inputValue || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) < 18,
		onClick: () => onPayClick(inputValue),
		className: "pisell-eftpos-pay-huifu-scan-footer-button"
	}, _pisell_utils.locales.getText("page.eftpos-pay.text.huifu.scan.confirm"))));
};
//#endregion
exports.ScanAction = ScanAction;
