import React from 'react';
import { Card, Dropdown } from 'antd';
import { EyeOutlined, MoreOutlined } from '@ant-design/icons';
import { Button, Icon } from '@pisell/materials';
var ConnectionDeviceCard = function ConnectionDeviceCard(_ref) {
  var _deviceInfo$statusLin;
  var title = _ref.title,
    description = _ref.description,
    deviceInfo = _ref.deviceInfo,
    connectionInfo = _ref.connectionInfo,
    deviceStatuses = _ref.deviceStatuses,
    connectionStatuses = _ref.connectionStatuses,
    profiles = _ref.profiles,
    lastSeen = _ref.lastSeen,
    actions = _ref.actions,
    showPreview = _ref.showPreview,
    onPreview = _ref.onPreview;
  var showFooter = profiles.length > 0 || Boolean(lastSeen);
  var extra = /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-actions"
  }, showPreview ? /*#__PURE__*/React.createElement(Button, {
    type: "text",
    icon: /*#__PURE__*/React.createElement(EyeOutlined, null),
    className: "device-detail-drawer__connection-card-action",
    onClick: onPreview
  }) : null, actions !== null && actions !== void 0 && actions.length ? /*#__PURE__*/React.createElement(Dropdown, {
    menu: {
      items: actions
    },
    trigger: ['click'],
    placement: "bottomRight"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "text",
    icon: /*#__PURE__*/React.createElement(MoreOutlined, null),
    className: "device-detail-drawer__connection-card-action"
  })) : null);
  return /*#__PURE__*/React.createElement(Card, {
    size: "small",
    className: "device-detail-drawer__connection-card",
    title: /*#__PURE__*/React.createElement("div", {
      className: "device-detail-drawer__connection-card-heading"
    }, /*#__PURE__*/React.createElement("div", {
      className: "device-detail-drawer__connection-card-title"
    }, title), description ? /*#__PURE__*/React.createElement("div", {
      className: "device-detail-drawer__connection-card-desc"
    }, description) : null),
    extra: extra
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-device"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: deviceInfo.icon || 'SettingOutlined'
  })), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-device-main"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-model"
  }, deviceInfo.modelName), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-meta"
  }, /*#__PURE__*/React.createElement("span", null, deviceInfo.brandName), /*#__PURE__*/React.createElement("span", null, "\xB7"), /*#__PURE__*/React.createElement("span", null, deviceInfo.typeName)), (_deviceInfo$statusLin = deviceInfo.statusLines) !== null && _deviceInfo$statusLin !== void 0 && _deviceInfo$statusLin.length ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-lines"
  }, deviceInfo.statusLines.map(function (line, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: index
    }, line);
  })) : null, deviceStatuses.length ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-statuses"
  }, deviceStatuses.map(function (status) {
    return /*#__PURE__*/React.createElement("span", {
      key: status.key,
      className: "device-detail-drawer__connection-card-status is-".concat(status.tone || 'default')
    }, /*#__PURE__*/React.createElement("span", {
      className: "device-detail-drawer__connection-card-status-dot"
    }), status.label);
  })) : null)), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-connection"
  }, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-connection-icon"
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "LinkOutlined"
  })), /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-connection-main"
  }, connectionInfo.lines.length ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-lines"
  }, connectionInfo.lines.map(function (line, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: index
    }, line);
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-statuses"
  }, connectionStatuses.map(function (status) {
    return /*#__PURE__*/React.createElement("span", {
      key: status.key,
      className: "device-detail-drawer__connection-card-status is-".concat(status.tone || 'default')
    }, /*#__PURE__*/React.createElement("span", {
      className: "device-detail-drawer__connection-card-status-dot"
    }), status.label);
  })))), showFooter ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-footer"
  }, profiles.length > 0 ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-profiles"
  }, profiles.map(function (profile) {
    return /*#__PURE__*/React.createElement("span", {
      key: profile.key,
      className: "device-detail-drawer__connection-card-profile"
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "FileTextOutlined"
    }), profile.label);
  })) : /*#__PURE__*/React.createElement("div", null), lastSeen ? /*#__PURE__*/React.createElement("div", {
    className: "device-detail-drawer__connection-card-last-seen"
  }, lastSeen) : /*#__PURE__*/React.createElement("div", null)) : null);
};
export default ConnectionDeviceCard;