import React from 'react';
import { List } from 'antd';
import { Icon, PisellModal } from '@pisell/materials';
import classNames from 'classnames';
var renderDeviceInfo = function renderDeviceInfo(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));
};
var PhysicalDeviceSelectModal = function PhysicalDeviceSelectModal(_ref) {
  var state = _ref.state,
    variant = _ref.variant,
    submitting = _ref.submitting,
    getText = _ref.getText,
    onClose = _ref.onClose,
    onSelect = _ref.onSelect;
  if (!state) return null;
  var isPhone = variant === 'phone';
  return /*#__PURE__*/React.createElement(PisellModal, {
    open: true,
    title: getText('pisell2.saas.app-peripheral.select-physical'),
    headerDivider: false,
    footerDivider: false,
    okVisible: false,
    cancelText: getText('pisell2.saas.app-peripheral.cancel'),
    cancelButtonProps: {
      block: true,
      size: 'large',
      type: 'default',
      disabled: submitting,
      onClick: onClose
    },
    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(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);
        },
        onKeyDown: function onKeyDown(event) {
          if (submitting) return;
          if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            onSelect(device);
          }
        }
      }, /*#__PURE__*/React.createElement(Icon, {
        type: "ApiOutlined"
      }), renderDeviceInfo(device)));
    }
  }));
};
export default PhysicalDeviceSelectModal;