import React from "react";
import { Card, Dropdown } from "antd";
import { Button as Button$1, Icon } from "@pisell/materials";
import { EyeOutlined, MoreOutlined } from "@ant-design/icons";
//#region src/plus/saasDevice/devicePlanning/modules/deviceConnections/components/ConnectionDeviceCard.tsx
const ConnectionDeviceCard = ({ title, description, deviceInfo, connectionInfo, deviceStatuses, connectionStatuses, profiles, lastSeen, actions, showPreview, onPreview }) => {
	var _deviceInfo$statusLin;
	const showFooter = profiles.length > 0 || Boolean(lastSeen);
	const extra = /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-card-actions" }, showPreview ? /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		icon: /* @__PURE__ */ React.createElement(EyeOutlined, null),
		className: "device-detail-drawer__connection-card-action",
		onClick: onPreview
	}) : null, (actions === null || actions === void 0 ? void 0 : actions.length) ? /* @__PURE__ */ React.createElement(Dropdown, {
		menu: { items: actions },
		trigger: ["click"],
		placement: "bottomRight"
	}, /* @__PURE__ */ React.createElement(Button$1, {
		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
	}, /* @__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, "·"), /* @__PURE__ */ React.createElement("span", null, deviceInfo.typeName)), ((_deviceInfo$statusLin = deviceInfo.statusLines) === null || _deviceInfo$statusLin === void 0 ? void 0 : _deviceInfo$statusLin.length) ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-card-lines" }, deviceInfo.statusLines.map((line, index) => /* @__PURE__ */ React.createElement("span", { key: index }, line))) : null, deviceStatuses.length ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-card-statuses" }, deviceStatuses.map((status) => /* @__PURE__ */ React.createElement("span", {
		key: status.key,
		className: `device-detail-drawer__connection-card-status is-${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((line, index) => /* @__PURE__ */ React.createElement("span", { key: index }, line))) : null, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-card-statuses" }, connectionStatuses.map((status) => /* @__PURE__ */ React.createElement("span", {
		key: status.key,
		className: `device-detail-drawer__connection-card-status is-${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((profile) => /* @__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);
};
//#endregion
export { ConnectionDeviceCard as default };
