import { _asyncToGenerator } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import CompensatedPisellContainer from "../../../pro/compensatedPisellContainer/index.js";
import withResponsive from "../../../responsive/withResponsive.js";
import { request } from "../../../utils/index.js";
import useLocale from "../../../hooks/useLocale.js";
import { createDevice, createWorkArea, deleteDevice, deleteWorkArea, getDeviceModel, getDeviceSetting, getDeviceTypes, getDevices, getWorkAreaDetail, getWorkAreas, linkDevice, updateDevice, updateWorkArea } from "./serve.js";
import { useTranslation } from "./hooks.js";
import locales_default from "./locales.js";
import { normalizeText, sortWorkAreaList } from "./constants.js";
import WorkAreaList from "./components/WorkAreaList/index.js";
import DeviceTable from "./components/DeviceTable/index.js";
import AddDeviceModal from "./components/AddDeviceModal/index.js";
import EditDeviceModal from "./components/EditDeviceModal/index.js";
import DeleteDeviceModal from "./components/DeleteDeviceModal/index.js";
import WorkAreaModal from "./components/WorkAreaModal/index.js";
import DeleteWorkAreaModal from "./components/DeleteWorkAreaModal/index.js";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Spin } from "antd";
import { locales } from "@pisell/utils";
import { Button as Button$1, Empty as Empty$1, Icon, PisellModal, PisellToast, Tag as Tag$1 } from "@pisell/materials";
import classNames from "classnames";
import { useRequest } from "ahooks";
import { ArrowLeftOutlined, DownOutlined, PlusOutlined, ReloadOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/appDevicePlanning/index.tsx
const EMPTY_DEVICES = [];
const TYPE_CODE_STORAGE_KEY = "pisell_iot_type_code";
const MODEL_CODE_STORAGE_KEY = "pisell_iot_model_code";
const APP_TYPE_STORAGE_KEY = "pisell_app_type";
const getStoredIotDevice = (app) => {
	try {
		var _app$storage, _app$storage2;
		const iotDevice = JSON.parse((app === null || app === void 0 || (_app$storage = app.storage) === null || _app$storage === void 0 ? void 0 : _app$storage.getStorage("iotDevice")) || "{}");
		const iotDeviceLastUsed = JSON.parse((app === null || app === void 0 || (_app$storage2 = app.storage) === null || _app$storage2 === void 0 ? void 0 : _app$storage2.getStorage("iotDeviceLastUsed")) || "{}");
		return {
			id: (iotDeviceLastUsed === null || iotDeviceLastUsed === void 0 ? void 0 : iotDeviceLastUsed.id) !== void 0 && (iotDeviceLastUsed === null || iotDeviceLastUsed === void 0 ? void 0 : iotDeviceLastUsed.id) !== null ? iotDeviceLastUsed.id : void 0,
			number: (iotDevice === null || iotDevice === void 0 ? void 0 : iotDevice.number) ? String(iotDevice.number) : ""
		};
	} catch (e) {
		return { number: "" };
	}
};
const SaasAppDevicePlanning = ({ className, style, kind = "smart", showBack = false, onLinked, onBack, variant }) => {
	var _context$appHelper, _context$appHelper2, _modelRequest$data, _modelDetail$type;
	const [typeCode, setTypeCode] = useState(() => localStorage.getItem(TYPE_CODE_STORAGE_KEY) || "");
	const [modelCode, setModelCode] = useState(() => localStorage.getItem(MODEL_CODE_STORAGE_KEY) || "");
	const context = useEngineContext();
	const locale = useLocale();
	const currentVariant = variant || "desktop";
	const isPhoneVariant = currentVariant === "phone";
	locales.init(locales_default, locale || "en");
	const getText = locales.getText;
	const translation = useTranslation();
	const utils = (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.utils) || {};
	const iotEndpoint = (context === null || context === void 0 || (_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.constants) === null || _context$appHelper2 === void 0 ? void 0 : _context$appHelper2.iotEndpoint) || "";
	const isModelSelecting = !typeCode || !modelCode;
	const isUniversalApp = localStorage.getItem(APP_TYPE_STORAGE_KEY) === "universal";
	const [workAreas, setWorkAreas] = useState([]);
	const [selectedWorkAreaId, setSelectedWorkAreaId] = useState();
	const [search, setSearch] = useState("");
	const [page, setPage] = useState(1);
	const [pageSize, setPageSize] = useState(10);
	const [addDeviceOpen, setAddDeviceOpen] = useState(false);
	const [takeoverDevice, setTakeoverDevice] = useState();
	const [selectedDevice, setSelectedDevice] = useState();
	const [editDeviceOpen, setEditDeviceOpen] = useState(false);
	const [deleteDeviceOpen, setDeleteDeviceOpen] = useState(false);
	const [workAreaModalOpen, setWorkAreaModalOpen] = useState(false);
	const [workAreaDrawerOpen, setWorkAreaDrawerOpen] = useState(false);
	const [workAreaModalMode, setWorkAreaModalMode] = useState("create");
	const [editingWorkArea, setEditingWorkArea] = useState();
	const [deleteModalOpen, setDeleteModalOpen] = useState(false);
	const [deleteRecord, setDeleteRecord] = useState();
	const [deleteCounts, setDeleteCounts] = useState({
		smart: 0,
		dumb: 0,
		integrated: 0
	});
	const [linkingDeviceId, setLinkingDeviceId] = useState();
	const [storedIotDevice, setStoredIotDevice] = useState(() => {
		var _utils$getApp;
		return getStoredIotDevice(utils === null || utils === void 0 || (_utils$getApp = utils.getApp) === null || _utils$getApp === void 0 ? void 0 : _utils$getApp.call(utils));
	});
	useEffect(() => {
		if (utils === null || utils === void 0 ? void 0 : utils.request) request.setRequest(utils.request);
	}, [utils === null || utils === void 0 ? void 0 : utils.request]);
	const workAreaRequest = useRequest(getWorkAreas, { onSuccess: (list) => {
		setWorkAreas(sortWorkAreaList(list));
	} });
	const deviceTypeRequest = useRequest(() => getDeviceTypes({
		kind,
		with: ["activeModels", "activeModels.activeProfiles"]
	}), { manual: true });
	const modelRequest = useRequest(getDeviceModel, { manual: true });
	const saveRequest = useRequest((payload) => workAreaModalMode === "create" ? createWorkArea(payload) : updateWorkArea((editingWorkArea === null || editingWorkArea === void 0 ? void 0 : editingWorkArea.id) || "", payload), { manual: true });
	const deviceRequest = useRequest(getDevices, { manual: true });
	const createDeviceRequest = useRequest(createDevice, { manual: true });
	const updateDeviceRequest = useRequest((params) => updateDevice(params.id, params.payload), { manual: true });
	const removeDeviceRequest = useRequest(deleteDevice, { manual: true });
	const getWorkAreaDetailRequest = useRequest(getWorkAreaDetail, { manual: true });
	const deleteRequest = useRequest(deleteWorkArea, { manual: true });
	useEffect(() => {
		if (!isModelSelecting) return;
		deviceTypeRequest.run();
	}, [isModelSelecting, kind]);
	useEffect(() => {
		if (!modelCode) return;
		modelRequest.run(modelCode);
	}, [modelCode]);
	useEffect(() => {
		if (!selectedWorkAreaId) return;
		if (!workAreas.some((item) => item.id === selectedWorkAreaId)) setSelectedWorkAreaId(void 0);
	}, [selectedWorkAreaId, workAreas]);
	const selectedWorkArea = useMemo(() => workAreas.find((item) => item.id === selectedWorkAreaId), [selectedWorkAreaId, workAreas]);
	const selectedWorkAreaName = selectedWorkArea ? translation(selectedWorkArea.name) || getText("pisell2.saas.device-planning.all-work-areas") : getText("pisell2.saas.device-planning.all-work-areas");
	const devices = (deviceRequest.data || EMPTY_DEVICES).filter((device) => device.model_code === modelCode);
	const modelDetail = ((_modelRequest$data = modelRequest.data) === null || _modelRequest$data === void 0 ? void 0 : _modelRequest$data.code) === modelCode ? modelRequest.data : void 0;
	const modelName = translation(modelDetail === null || modelDetail === void 0 ? void 0 : modelDetail.name) || modelCode || "-";
	const modelDescription = translation(modelDetail === null || modelDetail === void 0 ? void 0 : modelDetail.description);
	const deviceTypeName = translation(modelDetail === null || modelDetail === void 0 || (_modelDetail$type = modelDetail.type) === null || _modelDetail$type === void 0 ? void 0 : _modelDetail$type.name) || (modelDetail === null || modelDetail === void 0 ? void 0 : modelDetail.type_code) || typeCode || "-";
	const profileNameMap = useMemo(() => {
		const map = /* @__PURE__ */ new Map();
		((modelDetail === null || modelDetail === void 0 ? void 0 : modelDetail.active_profiles) || []).forEach((profile) => {
			map.set(profile.id, translation(profile.name) || String(profile.id));
		});
		devices.forEach((device) => {
			var _device$profile;
			if ((_device$profile = device.profile) === null || _device$profile === void 0 ? void 0 : _device$profile.id) map.set(device.profile.id, translation(device.profile.name) || String(device.profile.id));
		});
		return map;
	}, [
		devices,
		modelDetail,
		translation
	]);
	const tableData = useMemo(() => {
		const keyword = normalizeText(search);
		const hasCurrentDevice = devices.some((item) => storedIotDevice.number && item.number && storedIotDevice.number === String(item.number));
		return devices.map((item) => {
			var _item$type, _item$model, _item$profile;
			const name = translation(item.name);
			const typeName = translation((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.name) || deviceTypeName;
			const modelDisplayName = translation((_item$model = item.model) === null || _item$model === void 0 ? void 0 : _item$model.name) || modelName;
			const linkStatus = item.link || "unlinked";
			const isCurrent = Boolean(storedIotDevice.number && item.number && storedIotDevice.number === String(item.number));
			const profileName = translation((_item$profile = item.profile) === null || _item$profile === void 0 ? void 0 : _item$profile.name) || (item.profile_id ? profileNameMap.get(item.profile_id) : "") || (item.profile_id ? String(item.profile_id) : "-");
			return {
				id: item.id,
				name,
				typeName,
				modelName: modelDisplayName,
				profileName,
				link: linkStatus,
				status: linkStatus === "linked" ? item.status || "offline" : "unknown",
				typeCode: item.type_code,
				modelCode: item.model_code,
				isCurrent,
				isLastUsed: Boolean(!hasCurrentDevice && storedIotDevice.id !== void 0 && String(storedIotDevice.id) === String(item.id)),
				_raw: item
			};
		}).filter((item) => keyword ? [
			item.name,
			item.typeName,
			item.modelName,
			item.profileName,
			item._raw.workarea ? translation(item._raw.workarea.name) : ""
		].some((value) => normalizeText(value || "").includes(keyword)) : true);
	}, [
		deviceTypeName,
		devices,
		modelName,
		profileNameMap,
		search,
		storedIotDevice,
		translation
	]);
	const deviceTypeGroups = useMemo(() => (deviceTypeRequest.data || []).map((type) => ({
		type,
		models: [...type.active_models || []].filter((model) => {
			var _model$data;
			return iotEndpoint ? ((_model$data = model.data) === null || _model$data === void 0 ? void 0 : _model$data.endpoint) === iotEndpoint : true;
		}).sort((a, b) => (a.sort || 0) - (b.sort || 0))
	})).filter((group) => group.models.length > 0), [deviceTypeRequest.data, iotEndpoint]);
	const showInitialLoading = !isModelSelecting && (workAreaRequest.loading && workAreas.length === 0 || modelRequest.loading && !modelDetail);
	const handleBack = () => {
		var _context$appHelper3, _getApp, _history$goBack;
		if (onBack) {
			onBack();
			return;
		}
		const getApp = context === null || context === void 0 || (_context$appHelper3 = context.appHelper) === null || _context$appHelper3 === void 0 || (_context$appHelper3 = _context$appHelper3.utils) === null || _context$appHelper3 === void 0 ? void 0 : _context$appHelper3.getApp;
		const history = getApp === null || getApp === void 0 || (_getApp = getApp()) === null || _getApp === void 0 || (_getApp = _getApp.history) === null || _getApp === void 0 ? void 0 : _getApp.instance;
		history === null || history === void 0 || (_history$goBack = history.goBack) === null || _history$goBack === void 0 || _history$goBack.call(history);
	};
	const reloadWorkAreas = function() {
		var _ref = _asyncToGenerator(function* (selectedId) {
			const sorted = sortWorkAreaList(yield workAreaRequest.runAsync());
			setWorkAreas(sorted);
			if (selectedId) setSelectedWorkAreaId(selectedId);
			return sorted;
		});
		return function reloadWorkAreas(_x) {
			return _ref.apply(this, arguments);
		};
	}();
	const resetDeviceView = () => {
		setSearch("");
		setPage(1);
	};
	const handleSelectWorkArea = (id) => {
		setSelectedWorkAreaId(id);
		resetDeviceView();
		setWorkAreaDrawerOpen(false);
	};
	const persistDeviceModel = (nextTypeCode, nextModelCode) => {
		if (!nextTypeCode || !nextModelCode) return;
		localStorage.setItem(TYPE_CODE_STORAGE_KEY, nextTypeCode);
		localStorage.setItem(MODEL_CODE_STORAGE_KEY, nextModelCode);
	};
	const handleSelectDeviceModel = (type, model) => {
		const nextTypeCode = model.type_code || type.code;
		const nextModelCode = model.code;
		if (!nextTypeCode || !nextModelCode) return;
		if (!showBack) persistDeviceModel(nextTypeCode, nextModelCode);
		setTypeCode(nextTypeCode);
		setModelCode(nextModelCode);
		resetDeviceView();
	};
	const handleSwitchDeviceModel = () => {
		setTypeCode("");
		setModelCode("");
		setSearch("");
		setPage(1);
		setAddDeviceOpen(false);
		setEditDeviceOpen(false);
		setDeleteDeviceOpen(false);
		setSelectedDevice(void 0);
		setTakeoverDevice(void 0);
	};
	const getDeviceListParams = useCallback(() => ({
		workarea_id: selectedWorkAreaId,
		type_kind: kind,
		type_code: typeCode,
		model_code: modelCode,
		with: [
			"type",
			"model",
			"profile",
			"workarea"
		]
	}), [
		kind,
		modelCode,
		selectedWorkAreaId,
		typeCode
	]);
	const reloadDevices = useCallback(() => {
		if (!modelCode) return;
		deviceRequest.run(getDeviceListParams());
	}, [getDeviceListParams, modelCode]);
	useEffect(() => {
		reloadDevices();
	}, [reloadDevices]);
	useEffect(() => {
		if (!modelCode) return;
		const timer = window.setInterval(() => {
			reloadDevices();
		}, 60 * 1e3);
		return () => {
			window.clearInterval(timer);
		};
	}, [modelCode, reloadDevices]);
	const openCreateModal = () => {
		setWorkAreaModalMode("create");
		setEditingWorkArea(void 0);
		setWorkAreaModalOpen(true);
	};
	const openEditModal = (record) => {
		setWorkAreaModalMode("edit");
		setEditingWorkArea(record);
		setWorkAreaModalOpen(true);
	};
	const handleSaveWorkArea = function() {
		var _ref2 = _asyncToGenerator(function* (payload) {
			try {
				const saved = yield saveRequest.runAsync(payload);
				PisellToast({
					content: getText(workAreaModalMode === "create" ? "pisell2.saas.device-planning.message.create-success" : "pisell2.saas.device-planning.message.update-success"),
					duration: 2
				});
				setWorkAreaModalOpen(false);
				setEditingWorkArea(void 0);
				yield reloadWorkAreas((saved === null || saved === void 0 ? void 0 : saved.id) || (editingWorkArea === null || editingWorkArea === void 0 ? void 0 : editingWorkArea.id));
			} catch (e) {}
		});
		return function handleSaveWorkArea(_x2) {
			return _ref2.apply(this, arguments);
		};
	}();
	const openDeleteModal = (record) => {
		setDeleteRecord(record);
		setDeleteCounts({
			smart: 0,
			dumb: 0,
			integrated: 0
		});
		setDeleteModalOpen(true);
		getWorkAreaDetailRequest.runAsync({
			id: record.id,
			relation_count: [
				"smartDevices",
				"dumbDevices",
				"integratedDevices"
			]
		}).then((res) => {
			var _res$data;
			const _workArea = res === null || res === void 0 || (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data[0];
			setDeleteCounts({
				smart: (_workArea === null || _workArea === void 0 ? void 0 : _workArea.smart_devices_count) || 0,
				dumb: (_workArea === null || _workArea === void 0 ? void 0 : _workArea.dumb_devices_count) || 0,
				integrated: (_workArea === null || _workArea === void 0 ? void 0 : _workArea.integrated_devices_count) || 0
			});
		}).catch(() => setDeleteCounts({
			smart: 0,
			dumb: 0,
			integrated: 0
		}));
	};
	const handleConfirmDelete = function() {
		var _ref3 = _asyncToGenerator(function* () {
			if (!deleteRecord) return;
			try {
				yield deleteRequest.runAsync(deleteRecord.id);
				PisellToast({
					content: getText("pisell2.saas.device-planning.message.delete-success"),
					duration: 2
				});
				setDeleteModalOpen(false);
				setDeleteRecord(void 0);
				yield reloadWorkAreas();
				reloadDevices();
			} catch (e) {}
		});
		return function handleConfirmDelete() {
			return _ref3.apply(this, arguments);
		};
	}();
	const handleCreateDevice = function() {
		var _ref4 = _asyncToGenerator(function* (payload) {
			try {
				yield createDeviceRequest.runAsync(payload);
				PisellToast({
					content: getText("pisell2.saas.device-planning.add.create-success"),
					duration: 2
				});
				setAddDeviceOpen(false);
				setPage(1);
				reloadDevices();
			} catch (e) {}
		});
		return function handleCreateDevice(_x3) {
			return _ref4.apply(this, arguments);
		};
	}();
	const handleUpdateDevice = function() {
		var _ref5 = _asyncToGenerator(function* (id, payload) {
			try {
				yield updateDeviceRequest.runAsync({
					id,
					payload
				});
				PisellToast({
					content: getText("pisell2.saas.device-planning.edit.success"),
					duration: 2
				});
				setEditDeviceOpen(false);
				setSelectedDevice(void 0);
				reloadDevices();
			} catch (e) {}
		});
		return function handleUpdateDevice(_x4, _x5) {
			return _ref5.apply(this, arguments);
		};
	}();
	const handleDeleteDevice = function() {
		var _ref6 = _asyncToGenerator(function* () {
			if (!selectedDevice) return;
			try {
				yield removeDeviceRequest.runAsync(selectedDevice.id);
				PisellToast({
					content: getText("pisell2.saas.device-planning.delete-device.success"),
					duration: 2
				});
				setDeleteDeviceOpen(false);
				setSelectedDevice(void 0);
				reloadDevices();
			} catch (e) {}
		});
		return function handleDeleteDevice() {
			return _ref6.apply(this, arguments);
		};
	}();
	const handleLinkDevice = function() {
		var _ref7 = _asyncToGenerator(function* (record) {
			var _utils$getApp2;
			const app = utils === null || utils === void 0 || (_utils$getApp2 = utils.getApp) === null || _utils$getApp2 === void 0 ? void 0 : _utils$getApp2.call(utils);
			setLinkingDeviceId(record.id);
			try {
				var _app$locales, _app$plugins, _app$plugins$getDevic, _app$storage3, _app$storage4, _localStorage, _localStorage$setItem;
				const language = (app === null || app === void 0 || (_app$locales = app.locales) === null || _app$locales === void 0 ? void 0 : _app$locales.getLocale()) || "en";
				const deviceDetail = yield app === null || app === void 0 || (_app$plugins = app.plugins) === null || _app$plugins === void 0 || (_app$plugins = _app$plugins.get("device")) === null || _app$plugins === void 0 || (_app$plugins$getDevic = _app$plugins.getDeviceDetail) === null || _app$plugins$getDevic === void 0 ? void 0 : _app$plugins$getDevic.call(_app$plugins, { language });
				const linkedDevice = yield linkDevice(record.id, (deviceDetail === null || deviceDetail === void 0 ? void 0 : deviceDetail.data) || {});
				app === null || app === void 0 || (_app$storage3 = app.storage) === null || _app$storage3 === void 0 || _app$storage3.setStorage("iotDevice", JSON.stringify(linkedDevice || {}));
				app === null || app === void 0 || (_app$storage4 = app.storage) === null || _app$storage4 === void 0 || _app$storage4.setStorage("iotDeviceLastUsed", JSON.stringify(linkedDevice || {}));
				setStoredIotDevice({
					id: typeof (linkedDevice === null || linkedDevice === void 0 ? void 0 : linkedDevice.id) === "number" ? linkedDevice.id : void 0,
					number: (linkedDevice === null || linkedDevice === void 0 ? void 0 : linkedDevice.number) ? String(linkedDevice.number) : ""
				});
				persistDeviceModel(record.typeCode, record.modelCode);
				const setting = yield getDeviceSetting(record.id, ["general.channel"]);
				const channel = (setting === null || setting === void 0 ? void 0 : setting["general.channel"]) ? String(setting["general.channel"]) : "system";
				(_localStorage = localStorage) === null || _localStorage === void 0 || (_localStorage$setItem = _localStorage.setItem) === null || _localStorage$setItem === void 0 || _localStorage$setItem.call(_localStorage, "pisell_app_channel", channel);
				setTakeoverDevice(void 0);
				reloadDevices();
				yield onLinked === null || onLinked === void 0 ? void 0 : onLinked({
					device: linkedDevice,
					channel
				});
			} catch (e) {} finally {
				setLinkingDeviceId(void 0);
			}
		});
		return function handleLinkDevice(_x6) {
			return _ref7.apply(this, arguments);
		};
	}();
	const renderModelSelection = () => /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__model-step" }, deviceTypeRequest.loading && !deviceTypeGroups.length ? /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__empty-workarea" }, /* @__PURE__ */ React.createElement(Spin, null)) : deviceTypeGroups.length ? /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__model-group-list" }, deviceTypeGroups.map(({ type, models }) => /* @__PURE__ */ React.createElement("section", {
		key: type.code,
		className: "saas-app-device-planning__model-group"
	}, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__model-group-title" }, type.icon ? /* @__PURE__ */ React.createElement(Icon, { type: type.icon }) : null, /* @__PURE__ */ React.createElement("span", null, translation(type.name) || type.code)), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__model-grid" }, models.map((model) => {
		const name = translation(model.name) || model.code;
		const description = translation(model.description);
		return /* @__PURE__ */ React.createElement("div", {
			key: `${type.code}-${model.code}`,
			className: "saas-app-device-planning__model-card",
			onClick: () => handleSelectDeviceModel(type, model),
			style: {
				cursor: "pointer",
				padding: "16px"
			}
		}, /* @__PURE__ */ React.createElement("span", { className: "saas-app-device-planning__model-card-title" }, name), description ? /* @__PURE__ */ React.createElement("span", { className: "saas-app-device-planning__model-card-desc" }, description) : null);
	}))))) : /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__empty-workarea" }, /* @__PURE__ */ React.createElement(Empty$1, {
		image: Empty$1.PRESENTED_IMAGE_SIMPLE,
		description: getText("pisell2.saas.device-planning.empty.models")
	})));
	const renderTakeoverModal = () => /* @__PURE__ */ React.createElement(PisellModal, {
		title: getText("pisell2.saas.device-planning.takeover.title"),
		headerDivider: false,
		footerDivider: false,
		open: Boolean(takeoverDevice),
		footer: /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__footer" }, /* @__PURE__ */ React.createElement(Button$1, {
			type: "default",
			block: true,
			size: "large",
			disabled: Boolean(linkingDeviceId),
			onClick: () => setTakeoverDevice(void 0)
		}, getText("pisell2.saas.device-planning.takeover.cancel")), /* @__PURE__ */ React.createElement(Button$1, {
			type: "primary",
			block: true,
			size: "large",
			icon: /* @__PURE__ */ React.createElement(Icon, { type: "ThunderboltOutlined" }),
			loading: linkingDeviceId === (takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.id),
			disabled: Boolean(linkingDeviceId),
			onClick: () => takeoverDevice && handleLinkDevice(takeoverDevice)
		}, getText("pisell2.saas.device-planning.takeover.confirm"))),
		width: 640,
		destroyOnClose: true,
		maskClosable: false,
		platform: isPhoneVariant ? "h5" : void 0,
		mobileModalHeight: isPhoneVariant ? "auto" : void 0,
		className: classNames("saas-app-device-planning-takeover-modal", `saas-app-device-planning-takeover-modal--${currentVariant}`),
		onCancel: () => setTakeoverDevice(void 0)
	}, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__warning" }, /* @__PURE__ */ React.createElement(Icon, { type: "ExclamationCircleOutlined" }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__message" }, getText("pisell2.saas.device-planning.takeover.message")), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__detail" }, /* @__PURE__ */ React.createElement("strong", null, getText("pisell2.saas.device-planning.takeover.device")), (takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.name) || "-"), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__detail" }, /* @__PURE__ */ React.createElement("strong", null, getText("pisell2.saas.device-planning.takeover.status")), getText(`pisell2.saas.device-planning.status.${takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.link}`) || (takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.link) || "-", " • ", getText(`pisell2.saas.device-planning.status.${takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.status}`) || (takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.status) || "-"), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__detail" }, /* @__PURE__ */ React.createElement("strong", null, getText("pisell2.saas.device-planning.takeover.hardware")), (takeoverDevice === null || takeoverDevice === void 0 ? void 0 : takeoverDevice.modelName) || "-"), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning-takeover-modal__desc" }, getText("pisell2.saas.device-planning.takeover.desc")))));
	const renderWorkAreaDrawer = () => isPhoneVariant ? /* @__PURE__ */ React.createElement(CompensatedPisellContainer, {
		renderType: "drawer",
		showHandlerBar: isPhoneVariant,
		props: {
			open: workAreaDrawerOpen,
			placement: "bottom",
			height: "80dvh",
			className: classNames("saas-app-device-planning-workarea-drawer", `saas-app-device-planning-workarea-drawer--${currentVariant}`),
			destroyOnClose: true,
			onClose: () => setWorkAreaDrawerOpen(false),
			closable: false,
			bodyStyle: { padding: 0 }
		}
	}, /* @__PURE__ */ React.createElement(WorkAreaList, {
		className: "saas-app-device-planning-sider--drawer",
		loading: workAreaRequest.loading,
		workAreas,
		selectedWorkAreaId,
		getText,
		translation,
		onCreate: () => {
			setWorkAreaDrawerOpen(false);
			openCreateModal();
		},
		onSelect: handleSelectWorkArea,
		onEdit: (record) => {
			setWorkAreaDrawerOpen(false);
			openEditModal(record);
		},
		onDelete: (record) => {
			setWorkAreaDrawerOpen(false);
			openDeleteModal(record);
		}
	})) : null;
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("saas-app-device-planning", `saas-app-device-planning--${currentVariant}`, className),
		style
	}, /* @__PURE__ */ React.createElement("header", { className: classNames("saas-app-device-planning__global-header", { "saas-app-device-planning__global-header--with-back": showBack }) }, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__global-header-left" }, showBack ? /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		icon: /* @__PURE__ */ React.createElement(ArrowLeftOutlined, null),
		onClick: handleBack
	}) : null, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__global-title" }, getText(isModelSelecting ? "pisell2.saas.device-planning.select-model-title" : "pisell2.saas.device-planning.page-title")), isModelSelecting ? null : /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__global-subtitle" }, getText("pisell2.saas.device-planning.page-subtitle")))), isModelSelecting ? null : /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__global-actions" }, /* @__PURE__ */ React.createElement(Tag$1, { color: "green" }, deviceTypeName), isUniversalApp ? /* @__PURE__ */ React.createElement(Button$1, {
		type: "default",
		className: "saas-app-device-planning__switch-model-button",
		icon: /* @__PURE__ */ React.createElement(Icon, { type: "SwapOutlined" }),
		onClick: handleSwitchDeviceModel
	}, getText("pisell2.saas.device-planning.switch-model")) : null)), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__body" }, isModelSelecting || isPhoneVariant ? null : /* @__PURE__ */ React.createElement(WorkAreaList, {
		loading: workAreaRequest.loading,
		workAreas,
		selectedWorkAreaId,
		getText,
		translation,
		onCreate: openCreateModal,
		onSelect: handleSelectWorkArea,
		onEdit: openEditModal,
		onDelete: openDeleteModal
	}), /* @__PURE__ */ React.createElement("main", { className: classNames("saas-app-device-planning__content", { "saas-app-device-planning__content--model-selecting": isModelSelecting }) }, isModelSelecting ? renderModelSelection() : showInitialLoading ? /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__empty-workarea" }, /* @__PURE__ */ React.createElement(Spin, null)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__page-header" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__title" }, modelName), modelDescription ? /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__subtitle" }, modelDescription) : null), /* @__PURE__ */ React.createElement("div", { className: "saas-app-device-planning__page-actions" }, /* @__PURE__ */ React.createElement(Button$1, {
		type: "default",
		icon: /* @__PURE__ */ React.createElement(ReloadOutlined, null),
		loading: deviceRequest.loading,
		onClick: reloadDevices
	}, getText("pisell2.saas.device-planning.refresh")), /* @__PURE__ */ React.createElement(Button$1, {
		type: "primary",
		icon: /* @__PURE__ */ React.createElement(PlusOutlined, null),
		onClick: () => setAddDeviceOpen(true)
	}, getText("pisell2.saas.device-planning.add-device")))), isPhoneVariant ? /* @__PURE__ */ React.createElement("button", {
		type: "button",
		className: "saas-app-device-planning__workarea-trigger",
		onClick: () => setWorkAreaDrawerOpen(true)
	}, /* @__PURE__ */ React.createElement("span", { className: "saas-app-device-planning__workarea-trigger-label" }, getText("pisell2.saas.device-planning.work-areas")), /* @__PURE__ */ React.createElement("span", { className: "saas-app-device-planning__workarea-trigger-value" }, selectedWorkAreaName), /* @__PURE__ */ React.createElement(DownOutlined, null)) : null, /* @__PURE__ */ React.createElement(DeviceTable, {
		data: tableData,
		loading: deviceRequest.loading,
		search,
		page,
		pageSize,
		linkingDeviceId,
		getText,
		translation,
		onSearchChange: (value) => {
			setSearch(value);
			setPage(1);
		},
		onPageChange: (nextPage, nextPageSize) => {
			setPage(nextPage);
			setPageSize(nextPageSize);
		},
		onAdd: () => setAddDeviceOpen(true),
		onLink: handleLinkDevice,
		onTakeover: setTakeoverDevice,
		onEdit: (record) => {
			setSelectedDevice(record);
			setEditDeviceOpen(true);
		},
		onDelete: (record) => {
			setSelectedDevice(record);
			setDeleteDeviceOpen(true);
		}
	})))), /* @__PURE__ */ React.createElement(AddDeviceModal, {
		open: addDeviceOpen,
		variant: currentVariant,
		model: modelDetail || void 0,
		fallbackModelCode: modelCode,
		workAreaId: selectedWorkAreaId,
		workAreas,
		submitting: createDeviceRequest.loading,
		getText,
		translation,
		onClose: () => setAddDeviceOpen(false),
		onSubmit: handleCreateDevice
	}), /* @__PURE__ */ React.createElement(EditDeviceModal, {
		open: editDeviceOpen,
		variant: currentVariant,
		record: selectedDevice,
		workAreas,
		model: modelDetail || void 0,
		submitting: updateDeviceRequest.loading,
		getText,
		translation,
		onCancel: () => setEditDeviceOpen(false),
		onSubmit: handleUpdateDevice
	}), /* @__PURE__ */ React.createElement(DeleteDeviceModal, {
		open: deleteDeviceOpen,
		variant: currentVariant,
		record: selectedDevice,
		submitting: removeDeviceRequest.loading,
		getText,
		onCancel: () => setDeleteDeviceOpen(false),
		onConfirm: handleDeleteDevice
	}), /* @__PURE__ */ React.createElement(WorkAreaModal, {
		open: workAreaModalOpen,
		variant: currentVariant,
		mode: workAreaModalMode,
		record: editingWorkArea,
		submitting: saveRequest.loading,
		getText,
		onCancel: () => {
			setWorkAreaModalOpen(false);
			setEditingWorkArea(void 0);
		},
		onSubmit: handleSaveWorkArea
	}), /* @__PURE__ */ React.createElement(DeleteWorkAreaModal, {
		open: deleteModalOpen,
		variant: currentVariant,
		loading: getWorkAreaDetailRequest.loading,
		submitting: deleteRequest.loading,
		record: deleteRecord,
		counts: deleteCounts,
		translation,
		getText,
		onClose: () => {
			setDeleteModalOpen(false);
			setDeleteRecord(void 0);
			setDeleteCounts({
				smart: 0,
				dumb: 0,
				integrated: 0
			});
		},
		onConfirm: handleConfirmDelete
	}), renderTakeoverModal(), renderWorkAreaDrawer());
};
SaasAppDevicePlanning.displayName = "SaasAppDevicePlanning";
var appDevicePlanning_default = withResponsive(SaasAppDevicePlanning);
//#endregion
export { appDevicePlanning_default as default };
