import React from 'react';
import { List, Spin } from 'antd';
import { Button, Icon, PisellModal } from '@pisell/materials';
import classNames from 'classnames';
/** 蓝牙设备会透传信号强度，用于辅助用户选择距离更近的设备。 */
var getBluetoothRssiText = function getBluetoothRssiText(device) {
  var _device$metadata;
  if (device.connect_type !== 'BLUETOOTH') return '';
  var rssi = (_device$metadata = device.metadata) === null || _device$metadata === void 0 ? void 0 : _device$metadata.rssi;
  if (rssi === undefined || rssi === null || rssi === '') return '';
  return "RSSI: ".concat(rssi);
};

/** 渲染物理设备的可识别信息，优先展示连接方式和硬件地址。 */
var renderDeviceInfo = function renderDeviceInfo(device) {
  var rssiText = getBluetoothRssiText(device);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, device.name || device.uuid), /*#__PURE__*/React.createElement("span", null, [device.connect_type, device.ip, device.port, device.mac].filter(Boolean).join(' · ') || device.uuid), rssiText ? /*#__PURE__*/React.createElement("span", null, rssiText) : null);
};
var PhysicalDeviceSelectModal = function PhysicalDeviceSelectModal(_ref) {
  var state = _ref.state,
    variant = _ref.variant,
    submitting = _ref.submitting,
    searching = _ref.searching,
    getText = _ref.getText,
    onClose = _ref.onClose,
    onForgetConnection = _ref.onForgetConnection,
    onSelect = _ref.onSelect;
  if (!state) return null;
  var isPhone = variant === 'phone';
  var title = /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral-physical-modal__title"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.app-peripheral.select-physical')), searching && state.devices.length ? /*#__PURE__*/React.createElement(Spin, {
    size: "small"
  }) : null);
  return /*#__PURE__*/React.createElement(PisellModal, {
    open: true,
    title: title,
    headerDivider: false,
    footerDivider: false,
    footer: /*#__PURE__*/React.createElement("div", {
      className: "saas-app-peripheral-physical-modal__footer"
    }, /*#__PURE__*/React.createElement(Button, {
      danger: true,
      block: true,
      size: "large",
      disabled: submitting,
      onClick: onForgetConnection
    }, getText('pisell2.saas.app-peripheral.ignore-connection')), /*#__PURE__*/React.createElement(Button, {
      block: true,
      size: "large",
      type: "default",
      disabled: submitting,
      onClick: onClose
    }, getText('pisell2.saas.app-peripheral.close'))),
    width: 560,
    platform: isPhone ? 'h5' : undefined,
    mobileModalHeight: isPhone ? 'auto' : undefined,
    className: classNames('saas-app-peripheral-physical-modal', {
      'saas-app-peripheral-physical-modal--phone': isPhone
    }),
    destroyOnClose: true,
    maskClosable: !submitting,
    onCancel: function onCancel() {
      if (submitting) return;
      onClose();
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral-physical-modal__body"
  }, state.devices.length ? /*#__PURE__*/React.createElement(List, {
    className: "saas-app-peripheral-physical-modal__list",
    dataSource: state.devices,
    renderItem: function renderItem(device) {
      return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement("div", {
        role: "button",
        tabIndex: submitting ? -1 : 0,
        "aria-disabled": submitting,
        className: classNames('saas-app-peripheral-physical-modal__option', {
          'is-disabled': submitting
        }),
        onClick: function onClick() {
          if (submitting) return;
          onSelect(device);
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "ApiOutlined"
      }), renderDeviceInfo(device)));
    }
  }) : !searching ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral-physical-modal__empty"
  }, getText('pisell2.saas.app-peripheral.no-physical-devices')) : null, searching && !state.devices.length ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral-physical-modal__searching"
  }, /*#__PURE__*/React.createElement(Spin, null), /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.app-peripheral.searching-devices'))) : null));
};
export default PhysicalDeviceSelectModal;