var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/DeviceConnectionsPanel.tsx
var DeviceConnectionsPanel_exports = {};
__export(DeviceConnectionsPanel_exports, {
  default: () => DeviceConnectionsPanel_default
});
module.exports = __toCommonJS(DeviceConnectionsPanel_exports);
var import_react = __toESM(require("react"));
var import_antd = require("antd");
var import_materials = require("@pisell/materials");
var import_icons = require("@ant-design/icons");
var import_constants = require("../../../constants");
var import_utils = require("../../../utils");
var import_ConnectExistingDeviceModal = __toESM(require("./ConnectExistingDeviceModal"));
var import_DeviceConnectionsPanel = require("./DeviceConnectionsPanel.less");
var DeviceConnectionsPanel = ({
  activeKind,
  currentDevice,
  connections,
  loading,
  submitting,
  deleting,
  getText,
  translation,
  onCreateConnection,
  onUpdateConnection,
  onDeleteConnection
}) => {
  const [removingConnection, setRemovingConnection] = (0, import_react.useState)();
  const [connectMode, setConnectMode] = (0, import_react.useState)();
  const [editingConnection, setEditingConnection] = (0, import_react.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__ */ import_react.default.createElement(import_icons.LinkOutlined, null),
      label: getText(
        "pisell2.saas.device-planning.drawer.connections.connect-existing"
      ),
      onClick: () => setConnectMode("existing")
    },
    {
      key: "add-new",
      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null),
      label: getText(
        "pisell2.saas.device-planning.drawer.connections.add-new"
      ),
      onClick: () => setConnectMode("new")
    }
  ];
  const actionItems = (connection) => [
    {
      key: "edit",
      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.EditOutlined, null),
      label: getText(
        "pisell2.saas.device-planning.drawer.connections.edit-configuration"
      ),
      onClick: () => setEditingConnection(connection)
    },
    {
      key: "remove",
      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.DeleteOutlined, null),
      danger: true,
      label: getText(
        "pisell2.saas.device-planning.drawer.connections.remove"
      ),
      onClick: () => setRemovingConnection(connection)
    }
  ];
  const connectButton = isSmart ? /* @__PURE__ */ import_react.default.createElement(
    import_antd.Dropdown,
    {
      menu: { items: menuItems },
      trigger: ["click"],
      placement: "bottomRight"
    },
    /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null) }, getText("pisell2.saas.device-planning.drawer.connections.connect"))
  ) : /* @__PURE__ */ import_react.default.createElement(import_materials.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icons.PlusOutlined, null), onClick: () => setConnectMode("existing") }, getText("pisell2.saas.device-planning.drawer.connections.connect"));
  const renderProfileTags = (connection) => (connection.profiles || []).map((profile) => /* @__PURE__ */ import_react.default.createElement("span", { key: profile.id, className: "device-detail-drawer__connection-tag" }, translation(profile.name) || profile.id));
  const renderConnectionItem = (connection) => {
    var _a, _b;
    const device = getConnectedDevice(connection);
    const connectionType = (0, import_utils.getConnectionTypeLabel)(
      (_a = connection.config) == null ? void 0 : _a.connection_type
    );
    return /* @__PURE__ */ import_react.default.createElement("div", { key: connection.id, className: "device-detail-drawer__connection-item" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-icon" }, /* @__PURE__ */ import_react.default.createElement(
      import_materials.Icon,
      {
        type: ((_b = device == null ? void 0 : device.type) == null ? void 0 : _b.icon) || (isSmart ? "PrinterOutlined" : "DesktopOutlined")
      }
    )), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-main" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-name" }, device ? translation(device.name) || device.id : "-"), /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-meta" }, /* @__PURE__ */ import_react.default.createElement("span", null, connectionType), renderProfileTags(connection))), /* @__PURE__ */ import_react.default.createElement(
      import_antd.Dropdown,
      {
        menu: { items: actionItems(connection) },
        trigger: ["click"],
        placement: "bottomRight"
      },
      /* @__PURE__ */ import_react.default.createElement(
        import_materials.Button,
        {
          type: "text",
          icon: /* @__PURE__ */ import_react.default.createElement(import_icons.MoreOutlined, null),
          className: "device-detail-drawer__connection-more"
        }
      )
    ));
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-title" }, /* @__PURE__ */ import_react.default.createElement(import_materials.Icon, { type: isSmart ? "ApiOutlined" : "LinkOutlined" }), /* @__PURE__ */ import_react.default.createElement("span", null, title)), connectButton), /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading }, connections.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connection-list" }, connections.map(renderConnectionItem)) : /* @__PURE__ */ import_react.default.createElement("div", { className: "device-detail-drawer__connections-empty" }, /* @__PURE__ */ import_react.default.createElement(
    import_antd.Empty,
    {
      image: import_antd.Empty.PRESENTED_IMAGE_SIMPLE,
      description: emptyText
    }
  ))), removingConnection ? /* @__PURE__ */ import_react.default.createElement(
    import_materials.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: async () => {
          await onDeleteConnection(removingConnection.id);
          setRemovingConnection(void 0);
        }
      },
      cancelButtonProps: {
        block: true,
        size: "large",
        type: "default",
        disabled: deleting,
        onClick: () => setRemovingConnection(void 0)
      },
      width: 460,
      headerDivider: false
    },
    (0, import_constants.formatToken)(
      getText(
        "pisell2.saas.device-planning.drawer.connections.remove-confirm"
      ),
      { DeviceName: getConnectedDeviceName(removingConnection) }
    )
  ) : null, connectMode ? /* @__PURE__ */ import_react.default.createElement(
    import_ConnectExistingDeviceModal.default,
    {
      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: async (payload) => {
        await onCreateConnection(payload);
        setConnectMode(void 0);
      }
    }
  ) : null, editingConnection ? /* @__PURE__ */ import_react.default.createElement(
    import_ConnectExistingDeviceModal.default,
    {
      open: true,
      mode: "edit",
      currentDevice,
      editConnection: editingConnection,
      connectedDeviceIds: [],
      currentWorkAreaId: currentDevice.workarea_id,
      getText,
      translation,
      submitting,
      onClose: () => setEditingConnection(void 0),
      onUpdate: async (id, payload) => {
        await onUpdateConnection(id, payload);
        setEditingConnection(void 0);
      }
    }
  ) : null);
};
var DeviceConnectionsPanel_default = DeviceConnectionsPanel;
