import React from 'react';
import { Iconfont } from '@pisell/materials';
import useTerminalPeripherals from "../../hooks/useTerminalPeripherals";
import useNativeScanner from "../../hooks/useNativeScanner";
import "./index.less";
var DeviceIconGroup = function DeviceIconGroup(_ref) {
  var _ref$isShowScanner = _ref.isShowScanner,
    isShowScanner = _ref$isShowScanner === void 0 ? true : _ref$isShowScanner,
    _ref$isShowCamera = _ref.isShowCamera,
    isShowCamera = _ref$isShowCamera === void 0 ? true : _ref$isShowCamera,
    _ref$isShowNFC = _ref.isShowNFC,
    isShowNFC = _ref$isShowNFC === void 0 ? true : _ref$isShowNFC,
    style = _ref.style,
    className = _ref.className;
  var _useTerminalPeriphera = useTerminalPeripherals(),
    peripheralsStatus = _useTerminalPeriphera.peripheralsStatus;
  var _useNativeScanner = useNativeScanner(),
    isTerminal = _useNativeScanner.isTerminal;

  // 状态指示器渲染函数
  var statusIndicator = function 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 ".concat(className || ''),
    style: 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))));
};
export default DeviceIconGroup;