import React from 'react';
import { Icon } from '@pisell/materials';
import { LinkOutlined } from '@ant-design/icons';
import { DEVICE_ICON_COLOR } from "../../../../shared";
var DeviceCard = function DeviceCard(_ref) {
  var _device$type, _model$type, _device$type2, _model$type2;
  var device = _ref.device,
    model = _ref.model,
    translation = _ref.translation;
  return /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connect-summary-card is-".concat((device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb')
  }, /*#__PURE__*/React.createElement("span", {
    className: "device-detail-drawer__connect-device-icon is-".concat((device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb')
  }, /*#__PURE__*/React.createElement(Icon, {
    type: (device === null || device === void 0 || (_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) || (model === null || model === void 0 || (_model$type = model.type) === null || _model$type === void 0 ? void 0 : _model$type.icon) || 'DesktopOutlined',
    color: DEVICE_ICON_COLOR[(device === null || device === void 0 ? void 0 : device.type_kind) || 'dumb']
  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("strong", null, device ? translation(device.name) || device.id : translation(model === null || model === void 0 ? void 0 : model.name) || (model === null || model === void 0 ? void 0 : model.code)), /*#__PURE__*/React.createElement("span", null, device ? translation((_device$type2 = device.type) === null || _device$type2 === void 0 ? void 0 : _device$type2.name) || device.type_code : translation(model === null || model === void 0 || (_model$type2 = model.type) === null || _model$type2 === void 0 ? void 0 : _model$type2.name) || (model === null || model === void 0 ? void 0 : model.type_code))));
};
var DeviceConnectionSummary = function DeviceConnectionSummary(_ref2) {
  var mode = _ref2.mode,
    smartDevice = _ref2.smartDevice,
    peripheral = _ref2.peripheral,
    selectedModel = _ref2.selectedModel,
    translation = _ref2.translation;
  return /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connect-summary",
    style: {
      marginBottom: '16px'
    }
  }, /*#__PURE__*/React.createElement(DeviceCard, {
    device: smartDevice,
    translation: translation
  }), /*#__PURE__*/React.createElement(LinkOutlined, null), mode === 'new' ? /*#__PURE__*/React.createElement(DeviceCard, {
    model: selectedModel,
    translation: translation
  }) : /*#__PURE__*/React.createElement(DeviceCard, {
    device: peripheral,
    translation: translation
  }));
};
export default DeviceConnectionSummary;