import { _asyncToGenerator } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { formatToken } from "../../../constants.js";
import { getConnectionTypeLabel } from "../../../utils.js";
import ConnectExistingDeviceModal from "./ConnectExistingDeviceModal.js";
import React, { useState } from "react";
import { Dropdown, Empty, Spin } from "antd";
import { Button as Button$1, Icon, PisellModal } from "@pisell/materials";
import { DeleteOutlined, EditOutlined, LinkOutlined, MoreOutlined, PlusOutlined } from "@ant-design/icons";
import "./DeviceConnectionsPanel.less";
//#region src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceConnectionsPanel.tsx
const DeviceConnectionsPanel = ({ activeKind, currentDevice, connections, loading, submitting, deleting, getText, translation, onCreateConnection, onUpdateConnection, onDeleteConnection }) => {
	const [removingConnection, setRemovingConnection] = useState();
	const [connectMode, setConnectMode] = useState();
	const [editingConnection, setEditingConnection] = useState();
	if (activeKind === "integrated") return null;
	const isSmart = activeKind === "smart";
	const getConnectedDevice = (connection) => (isSmart ? connection.target_device : connection.source_device) || null;
	const getConnectedDeviceName = (connection) => {
		if (!connection) return "";
		const device = getConnectedDevice(connection);
		return device ? translation(device.name) || String(device.id) : "-";
	};
	const title = getText(isSmart ? "pisell2.saas.device-planning.drawer.connections.peripherals" : "pisell2.saas.device-planning.drawer.connections.connected-to");
	const emptyText = getText(isSmart ? "pisell2.saas.device-planning.drawer.connections.no-peripherals" : "pisell2.saas.device-planning.drawer.connections.not-connected-smart");
	const menuItems = [{
		key: "connect-existing",
		icon: /* @__PURE__ */ React.createElement(LinkOutlined, null),
		label: getText("pisell2.saas.device-planning.drawer.connections.connect-existing"),
		onClick: () => setConnectMode("existing")
	}, {
		key: "add-new",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		label: getText("pisell2.saas.device-planning.drawer.connections.add-new"),
		onClick: () => setConnectMode("new")
	}];
	const actionItems = (connection) => [{
		key: "edit",
		icon: /* @__PURE__ */ React.createElement(EditOutlined, null),
		label: getText("pisell2.saas.device-planning.drawer.connections.edit-configuration"),
		onClick: () => setEditingConnection(connection)
	}, {
		key: "remove",
		icon: /* @__PURE__ */ React.createElement(DeleteOutlined, null),
		danger: true,
		label: getText("pisell2.saas.device-planning.drawer.connections.remove"),
		onClick: () => setRemovingConnection(connection)
	}];
	const connectButton = isSmart ? /* @__PURE__ */ React.createElement(Dropdown, {
		menu: { items: menuItems },
		trigger: ["click"],
		placement: "bottomRight"
	}, /* @__PURE__ */ React.createElement(Button$1, { icon: /* @__PURE__ */ React.createElement(PlusOutlined, null) }, getText("pisell2.saas.device-planning.drawer.connections.connect"))) : /* @__PURE__ */ React.createElement(Button$1, {
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		onClick: () => setConnectMode("existing")
	}, getText("pisell2.saas.device-planning.drawer.connections.connect"));
	const renderProfileTags = (connection) => (connection.profiles || []).map((profile) => /* @__PURE__ */ React.createElement("span", {
		key: profile.id,
		className: "device-detail-drawer__connection-tag"
	}, translation(profile.name) || profile.id));
	const renderConnectionItem = (connection) => {
		var _connection$config, _device$type;
		const device = getConnectedDevice(connection);
		const connectionType = getConnectionTypeLabel((_connection$config = connection.config) === null || _connection$config === void 0 ? void 0 : _connection$config.connection_type);
		return /* @__PURE__ */ React.createElement("div", {
			key: connection.id,
			className: "device-detail-drawer__connection-item"
		}, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-icon" }, /* @__PURE__ */ React.createElement(Icon, { type: (device === null || device === void 0 || (_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) || (isSmart ? "PrinterOutlined" : "DesktopOutlined") })), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-main" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-name" }, device ? translation(device.name) || device.id : "-"), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-meta" }, /* @__PURE__ */ React.createElement("span", null, connectionType), renderProfileTags(connection))), /* @__PURE__ */ React.createElement(Dropdown, {
			menu: { items: actionItems(connection) },
			trigger: ["click"],
			placement: "bottomRight"
		}, /* @__PURE__ */ React.createElement(Button$1, {
			type: "text",
			icon: /* @__PURE__ */ React.createElement(MoreOutlined, null),
			className: "device-detail-drawer__connection-more"
		})));
	};
	return /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connections" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connections-header" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connections-title" }, /* @__PURE__ */ React.createElement(Icon, { type: isSmart ? "ApiOutlined" : "LinkOutlined" }), /* @__PURE__ */ React.createElement("span", null, title)), connectButton), /* @__PURE__ */ React.createElement(Spin, { spinning: loading }, connections.length ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connection-list" }, connections.map(renderConnectionItem)) : /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connections-empty" }, /* @__PURE__ */ React.createElement(Empty, {
		image: Empty.PRESENTED_IMAGE_SIMPLE,
		description: emptyText
	}))), removingConnection ? /* @__PURE__ */ React.createElement(PisellModal, {
		open: true,
		title: getText("pisell2.saas.device-planning.drawer.connections.remove-title"),
		onCancel: () => setRemovingConnection(void 0),
		okText: getText("pisell2.saas.device-planning.drawer.connections.remove"),
		cancelText: getText("pisell2.saas.device-planning.drawer.connections.cancel"),
		okButtonProps: {
			block: true,
			size: "large",
			danger: true,
			loading: deleting,
			onClick: function() {
				var _ref = _asyncToGenerator(function* () {
					yield onDeleteConnection(removingConnection.id);
					setRemovingConnection(void 0);
				});
				return function onClick() {
					return _ref.apply(this, arguments);
				};
			}()
		},
		cancelButtonProps: {
			block: true,
			size: "large",
			type: "default",
			disabled: deleting,
			onClick: () => setRemovingConnection(void 0)
		},
		width: 460,
		headerDivider: false
	}, formatToken(getText("pisell2.saas.device-planning.drawer.connections.remove-confirm"), { DeviceName: getConnectedDeviceName(removingConnection) })) : null, connectMode ? /* @__PURE__ */ React.createElement(ConnectExistingDeviceModal, {
		open: true,
		mode: connectMode,
		currentDevice,
		connectedDeviceIds: connections.map((connection) => activeKind === "smart" ? connection.target_device_id : connection.source_device_id),
		currentWorkAreaId: currentDevice.workarea_id,
		getText,
		translation,
		submitting,
		onClose: () => setConnectMode(void 0),
		onSubmit: function() {
			var _ref2 = _asyncToGenerator(function* (payload) {
				yield onCreateConnection(payload);
				setConnectMode(void 0);
			});
			return function(_x) {
				return _ref2.apply(this, arguments);
			};
		}()
	}) : null, editingConnection ? /* @__PURE__ */ React.createElement(ConnectExistingDeviceModal, {
		open: true,
		mode: "edit",
		currentDevice,
		editConnection: editingConnection,
		connectedDeviceIds: [],
		currentWorkAreaId: currentDevice.workarea_id,
		getText,
		translation,
		submitting,
		onClose: () => setEditingConnection(void 0),
		onUpdate: function() {
			var _ref3 = _asyncToGenerator(function* (id, payload) {
				yield onUpdateConnection(id, payload);
				setEditingConnection(void 0);
			});
			return function(_x2, _x3) {
				return _ref3.apply(this, arguments);
			};
		}()
	}) : null);
};
//#endregion
export { DeviceConnectionsPanel as default };
