import { DEVICE_ICON_COLOR } from "../../../../shared/utils.js";
import DrawerSidebar from "../DrawerSidebar.js";
import DeviceInfoPanel from "../DeviceInfoPanel.js";
import DeviceConnectionsPanel from "../../../deviceConnections/components/DeviceConnectionsPanel.js";
import { useDeviceConnections } from "../../../deviceConnections/hooks/useDeviceConnections.js";
import { useDeviceDetail } from "../../hooks/useDeviceDetail.js";
import React from "react";
import { Drawer } from "antd";
import { Button as Button$1, Icon } from "@pisell/materials";
import classNames from "classnames";
import { CloseOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/modules/deviceDetail/components/DeviceDetailDrawer/index.tsx
const DeviceDetailDrawer = ({ open, record, initialTab = "info", getText, translation, onClose, onEdit, onDelete, onConnectionsChanged }) => {
	var _device$type;
	const { activeTab, activeKind, displayRecord, setActiveTab } = useDeviceDetail({
		open,
		record,
		initialTab,
		translation
	});
	const device = displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw;
	const isBuildInsTab = activeTab === "buildIns";
	const isComponentDevice = (displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw.structure) === "component";
	const connectionType = isBuildInsTab || isComponentDevice ? "component" : "dumb";
	const connections = useDeviceConnections({
		open,
		activeTab,
		activeKind,
		connectionType,
		displayRecord,
		onConnectionsChanged
	});
	return /* @__PURE__ */ React.createElement(Drawer, {
		open,
		onClose,
		width: 720,
		maskClosable: true,
		closable: false,
		className: "device-detail-drawer",
		rootClassName: "device-detail-drawer-root",
		styles: { body: { padding: 0 } },
		bodyStyle: { padding: 0 }
	}, displayRecord ? /* @__PURE__ */ React.createElement("div", { className: classNames("device-detail-drawer__root", `is-${activeKind}`) }, /* @__PURE__ */ React.createElement(DrawerSidebar, {
		activeKey: activeTab,
		activeKind,
		showBuildIns: (displayRecord === null || displayRecord === void 0 ? void 0 : displayRecord._raw.structure) === "composite",
		getText,
		onChange: setActiveTab
	}), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__main" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__header" }, (device === null || device === void 0 || (_device$type = device.type) === null || _device$type === void 0 ? void 0 : _device$type.icon) ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__icon" }, /* @__PURE__ */ React.createElement(Icon, {
		type: device.type.icon,
		color: DEVICE_ICON_COLOR[activeKind]
	})) : null, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__name" }, displayRecord.name), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__type" }, displayRecord.typeName)), /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		icon: /* @__PURE__ */ React.createElement(CloseOutlined, null),
		onClick: onClose
	})), /* @__PURE__ */ React.createElement("div", {
		className: "device-detail-drawer__content",
		style: { padding: activeTab === "info" ? "16px" : "0" }
	}, activeTab === "info" ? /* @__PURE__ */ React.createElement(DeviceInfoPanel, {
		record: displayRecord,
		getText
	}) : /* @__PURE__ */ React.createElement(DeviceConnectionsPanel, {
		activeKind,
		connectionType,
		isBuildIns: isBuildInsTab,
		hideConnectButton: isComponentDevice,
		currentDevice: displayRecord._raw,
		connections: connections.connections,
		loading: connections.loading,
		submitting: connections.submitting,
		deleting: connections.deleting,
		getText,
		translation,
		onCreateConnection: connections.handleCreateConnection,
		onUpdateConnection: connections.handleUpdateConnection,
		onDeleteConnection: connections.handleDeleteConnection
	})), activeTab === "info" ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__footer" }, /* @__PURE__ */ React.createElement(Button$1, {
		danger: true,
		size: "large",
		onClick: onDelete
	}, getText("pisell2.saas.device-planning.detail.delete")), /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		size: "large",
		onClick: onEdit
	}, getText("pisell2.saas.device-planning.detail.edit"))) : null)) : null);
};
//#endregion
export { DeviceDetailDrawer as default };
