import React from 'react';
import { Button, Icon, Tag } from '@pisell/materials';
var PeripheralConnectionCard = function PeripheralConnectionCard(_ref) {
  var model = _ref.model,
    getText = _ref.getText,
    onOpenActions = _ref.onOpenActions,
    onOpenPhysicalSelect = _ref.onOpenPhysicalSelect,
    onConnect = _ref.onConnect;
  var renderStatusTag = function renderStatusTag() {
    var color = model.status === 'connected' ? 'green' : model.status === 'connecting' ? 'gold' : 'red';
    return /*#__PURE__*/React.createElement(Tag, {
      color: color
    }, getText("pisell2.saas.app-peripheral.status.".concat(model.status)));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card",
    role: "button",
    tabIndex: 0,
    onClick: onOpenActions,
    onKeyDown: function onKeyDown(event) {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        onOpenActions();
      }
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: model.icon
  })), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-main"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-title-row"
  }, /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-title"
  }, model.title), renderStatusTag()), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-subtitle"
  }, model.subtitle), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__meta"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.app-peripheral.model'), ":\xA0", model.modelName), /*#__PURE__*/React.createElement("span", {
    className: "saas-app-peripheral__tag"
  }, model.connectionTypeLabel), model.connectionDetail ? /*#__PURE__*/React.createElement("span", {
    className: "saas-app-peripheral__tag"
  }, model.connectionDetail) : null), model.profileLabels.length ? /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__meta"
  }, /*#__PURE__*/React.createElement("span", null, getText('pisell2.saas.app-peripheral.profiles'), ":"), model.profileLabels.map(function (label) {
    return /*#__PURE__*/React.createElement("span", {
      key: String(label),
      className: "saas-app-peripheral__tag"
    }, label);
  })) : null), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-actions"
  }, model.canSetUp ? /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(Icon, {
      type: "SettingOutlined"
    }),
    disabled: model.actionDisabled,
    onClick: function onClick(event) {
      event.stopPropagation();
      if (model.isSelectAction) {
        onOpenPhysicalSelect();
        return;
      }
      onOpenActions();
    }
  }, getText('pisell2.saas.app-peripheral.set-up')) : model.canConnect ? /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    icon: /*#__PURE__*/React.createElement(Icon, {
      type: "ApiOutlined"
    }),
    disabled: model.actionDisabled,
    onClick: function onClick(event) {
      event.stopPropagation();
      onConnect();
    }
  }, getText('pisell2.saas.app-peripheral.connect')) : null));
};
export default PeripheralConnectionCard;