import useTerminalPeripherals from "../../hooks/useTerminalPeripherals.js";
import useNativeScanner from "../../hooks/useNativeScanner.js";
import React from "react";
import { Iconfont } from "@pisell/materials";
import "./index.less";
//#region src/pro/comprehensiveSearch/components/deviceIconGroup/index.tsx
const DeviceIconGroup = ({ isShowScanner = true, isShowCamera = true, isShowNFC = true, style, className }) => {
	const { peripheralsStatus } = useTerminalPeripherals();
	const { isTerminal } = useNativeScanner();
	const statusIndicator = (status) => {
		return /* @__PURE__ */ React.createElement(Iconfont, {
			style: {
				borderRadius: "50%",
				background: status ? "#17B26A" : "#F04438",
				color: "#fff"
			},
			type: status ? "pisell2-check" : "pisell2-x-close"
		});
	};
	return /* @__PURE__ */ React.createElement("div", {
		className: `device-icon-group ${className || ""}`,
		style
	}, isShowScanner && /* @__PURE__ */ React.createElement("span", { className: "device-icon-group__icon-item" }, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-Scanner" }), /* @__PURE__ */ React.createElement("div", { className: "status-indicator" }, statusIndicator((peripheralsStatus === null || peripheralsStatus === void 0 ? void 0 : peripheralsStatus.scanner) === "connected"))), isShowNFC && /* @__PURE__ */ React.createElement("span", { className: "device-icon-group__icon-item" }, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-NFC" }), /* @__PURE__ */ React.createElement("div", { className: "status-indicator" }, statusIndicator((peripheralsStatus === null || peripheralsStatus === void 0 ? void 0 : peripheralsStatus.nfc) === "connected"))), isShowCamera && /* @__PURE__ */ React.createElement("span", { className: "device-icon-group__icon-item" }, /* @__PURE__ */ React.createElement(Iconfont, { type: "pisell2-camera" }), /* @__PURE__ */ React.createElement("div", { className: "status-indicator" }, statusIndicator(isTerminal))));
};
//#endregion
export { DeviceIconGroup as default };
