import React from "react";
import { Drawer } from "antd";
import { Button as Button$1, Icon, Tag as Tag$1 } from "@pisell/materials";
import classNames from "classnames";
import { CloseOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/index.tsx
const DeviceDetailDrawer = ({ open, record, getText, translation, onClose, onEdit, onDelete }) => {
	var _device$type;
	const device = record === null || record === void 0 ? void 0 : record._raw;
	const online = (record === null || record === void 0 ? void 0 : record.status) === "online";
	return /* @__PURE__ */ React.createElement(Drawer, {
		open,
		onClose,
		width: 520,
		maskClosable: true,
		closable: false,
		className: "device-detail-drawer",
		rootClassName: "device-detail-drawer-root",
		styles: { body: { padding: 0 } },
		bodyStyle: { padding: 0 }
	}, record ? /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__root" }, /* @__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 })) : null, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__heading" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__name" }, record.name), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__type" }, record.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" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__section-title" }, getText("pisell2.saas.device-planning.detail.basic-info")), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.name")), /* @__PURE__ */ React.createElement("strong", null, record.name)), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.type")), /* @__PURE__ */ React.createElement("strong", null, record.typeName)), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.model")), /* @__PURE__ */ React.createElement("strong", null, record.modelName)), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-two-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.profile")), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__profile-card" }, /* @__PURE__ */ React.createElement(Icon, { type: "FileTextOutlined" }), record.profileName))), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__section-title" }, getText("pisell2.saas.device-planning.detail.status")), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-list" }, /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.link-status")), /* @__PURE__ */ React.createElement(Tag$1, {
		color: record.link === "linked" ? "green" : "gold",
		style: { marginRight: 0 }
	}, getText(`pisell2.saas.device-planning.status.${record.link}`) || record.link)), /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__info-row" }, /* @__PURE__ */ React.createElement("span", null, getText("pisell2.saas.device-planning.detail.online-status")), /* @__PURE__ */ React.createElement("span", { className: "device-detail-drawer__online-status" }, /* @__PURE__ */ React.createElement("span", { className: classNames("device-detail-drawer__status-dot", { "is-online": online }) }), getText(`pisell2.saas.device-planning.status.${record.status}`) || record.status)))), /* @__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);
};
//#endregion
export { DeviceDetailDrawer as default };
