import React from 'react';
import { Alert } from 'antd';
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;
  /** 根据展示状态渲染状态标签；搜索中只展示小 loading，不展示状态文案。 */
  var renderStatusTag = function renderStatusTag() {
    if (model.factStatus === 'empty' && model.status !== 'connecting') {
      return null;
    }
    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
  }, /*#__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, model.setupWarningKey ? /*#__PURE__*/React.createElement(Alert, {
    className: "saas-app-peripheral__setup-warning",
    type: "warning",
    showIcon: true,
    message: getText(model.setupWarningKey)
  }) : null), /*#__PURE__*/React.createElement("div", {
    className: "saas-app-peripheral__card-actions"
  }, model.canSetUp ? /*#__PURE__*/React.createElement(Button, {
    type: "primary",
    className: "saas-app-peripheral__setup-button",
    icon: /*#__PURE__*/React.createElement(Icon, {
      type: "SettingOutlined"
    }),
    disabled: model.actionDisabled,
    onClick: function onClick(event) {
      event.stopPropagation();
      if (model.isPhysicalSetupAction) {
        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;