import React from "react";
import { Dropdown } from "antd";
import { Button as Button$1, Icon, Tag as Tag$1 } from "@pisell/materials";
import { DeleteOutlined, DisconnectOutlined, EditOutlined, MoreOutlined, PlayCircleOutlined } from "@ant-design/icons";
//#region src/plus/saasDevice/appPeripheral/components/PeripheralConnectionCard.tsx
const PeripheralConnectionCard = ({ model, getText, onEdit, onRemove, onRequestDisconnect, onOpenUsageSelect, onTest, onOpenPhysicalSelect, onConnect }) => {
	const renderStatusTag = () => {
		const color = model.status === "connected" ? "green" : model.status === "connecting" ? "gold" : "red";
		return /* @__PURE__ */ React.createElement(Tag$1, { color }, getText(`pisell2.saas.app-peripheral.status.${model.status}`));
	};
	const getActionItems = () => [
		{
			key: "edit",
			icon: /* @__PURE__ */ React.createElement(EditOutlined, null),
			label: getText("pisell2.saas.app-peripheral.edit"),
			onClick: () => onEdit(model.connection)
		},
		...model.canDisconnect ? [{
			key: "disconnect",
			icon: /* @__PURE__ */ React.createElement(DisconnectOutlined, null),
			label: getText("pisell2.saas.app-peripheral.disconnect"),
			onClick: () => onRequestDisconnect(model.connection)
		}] : [],
		{
			key: "remove",
			icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
			danger: true,
			label: getText("pisell2.saas.app-peripheral.remove"),
			onClick: () => onRemove(model.connection)
		}
	];
	return /* @__PURE__ */ React.createElement("div", { className: "saas-app-peripheral__card" }, /* @__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((label) => /* @__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.canTest ? /* @__PURE__ */ React.createElement(Button$1, {
		icon: /* @__PURE__ */ React.createElement(PlayCircleOutlined, null),
		onClick: onTest
	}, getText("pisell2.saas.app-peripheral.test")) : model.canConnect ? /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		icon: /* @__PURE__ */ React.createElement(Icon, { type: "ApiOutlined" }),
		disabled: model.actionDisabled,
		onClick: () => {
			if (model.isUsageAction) {
				onOpenUsageSelect();
				return;
			}
			if (model.isSelectAction) {
				onOpenPhysicalSelect();
				return;
			}
			onConnect();
		}
	}, model.actionText) : null, /* @__PURE__ */ React.createElement(Dropdown, {
		menu: { items: getActionItems() },
		trigger: ["click"],
		placement: "bottomRight"
	}, /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		icon: /* @__PURE__ */ React.createElement(MoreOutlined, null)
	}))));
};
//#endregion
export { PeripheralConnectionCard as default };
