import { useCameraDevice, useScanListener, useScannerDevice } from "./hooks.js";
import React, { useEffect, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Iconfont, Input } from "@pisell/materials";
import "./index.less";
//#region src/components/eftposPay/huifu/Action.tsx
const NativeDeviceStatus = ({ type, status }) => {
	const iconType = type === "scanner" ? "pisell2-Scanner" : "pisell2-camera";
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-status" }, /* @__PURE__ */ React.createElement(Iconfont, {
		type: iconType,
		style: { fontSize: "40px" }
	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-status-wrapper" }, /* @__PURE__ */ React.createElement(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 } = useScannerDevice();
	const { cameraStatus, activeCamera } = useCameraDevice();
	const { scanResult } = useScanListener();
	const [inputValue, setInputValue] = useState("");
	useEffect(() => {
		if (!!(scanResult === null || scanResult === void 0 ? void 0 : scanResult.value)) onScanCallback(scanResult.value);
	}, [scanResult]);
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan" }, !isNativeApp ? /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-header" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-header-title" }, locales.getText("page.eftpos-pay.text.huifu.scan.title")), /* @__PURE__ */ React.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-header-close",
		onClick: onClose
	}, /* @__PURE__ */ React.createElement(Iconfont, {
		type: "pisell2-x-close",
		style: { fontSize: "24px" }
	})), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-header-divider" })) : null, /* @__PURE__ */ React.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-content",
		style: { paddingTop: isNativeApp ? "0" : "24px" }
	}, !!isNativeApp && /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-title" }, locales.getText("page.eftpos-pay.text.huifu.scan.title")), /* @__PURE__ */ React.createElement("div", { className: `${DEFAULT_SCANNER_CLASS} ${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}` }, /* @__PURE__ */ React.createElement(NativeDeviceStatus, {
		type: "scanner",
		status: scannerStatus
	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-scanner-right" }, /* @__PURE__ */ React.createElement("span", { className: `${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}-title` }, scannerStatus ? locales.getText("page.eftpos-pay.text.huifu.scan.gun.connected") : locales.getText("page.eftpos-pay.text.huifu.scan.gun.not-connected")), /* @__PURE__ */ React.createElement("span", { className: `${DEFAULT_SCANNER_CLASS}-${scannerStatus ? "active" : "unactive"}-desc` }, scannerStatus ? locales.getText("page.eftpos-pay.text.huifu.scan.gun.connected-desc") : locales.getText("page.eftpos-pay.text.huifu.scan.gun.not-connected-desc")))), cameraStatus && /* @__PURE__ */ React.createElement("div", {
		className: "pisell-eftpos-pay-huifu-scan-content-camera",
		onClick: activeCamera
	}, /* @__PURE__ */ React.createElement(NativeDeviceStatus, {
		type: "camera",
		status: cameraStatus
	}), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-camera-right" }, /* @__PURE__ */ React.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-content-camera-title" }, locales.getText("page.eftpos-pay.text.huifu.scan.camera-title")), /* @__PURE__ */ React.createElement("span", { className: "pisell-eftpos-pay-huifu-scan-content-camera-desc" }, locales.getText("page.eftpos-pay.text.huifu.scan.camera-desc")))), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper-title" }, locales.getText("page.eftpos-pay.text.huifu.scan.input-title")), /* @__PURE__ */ React.createElement(Input, {
		placeholder: 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.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-content-input-wrapper-tip" }, "💡", locales.getText("page.eftpos-pay.text.huifu.scan.input-tip")))), /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-footer" }, /* @__PURE__ */ React.createElement("div", { className: "pisell-eftpos-pay-huifu-scan-footer-divider" }), /* @__PURE__ */ React.createElement(Button, {
		type: "default",
		block: true,
		size: "large",
		className: "pisell-eftpos-pay-huifu-scan-footer-button",
		onClick: onClose
	}, locales.getText("page.eftpos-pay.text.huifu.scan.cancel")), /* @__PURE__ */ React.createElement(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"
	}, locales.getText("page.eftpos-pay.text.huifu.scan.confirm"))));
};
//#endregion
export { ScanAction };
