const require_runtime = require("../../../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_asyncToGenerator = require("../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js");
const require_types = require("../../../model/types.js");
const require_useConnectDeviceModal = require("../hooks/useConnectDeviceModal.js");
const require_ConnectDeviceModalHeader = require("./connectDeviceModal/ConnectDeviceModalHeader.js");
const require_ConnectionConfigFields = require("./connectDeviceModal/ConnectionConfigFields.js");
const require_DeviceConnectionSummary = require("./connectDeviceModal/DeviceConnectionSummary.js");
const require_NewPeripheralInfoFields = require("./connectDeviceModal/NewPeripheralInfoFields.js");
const require_PickExistingDeviceStep = require("./connectDeviceModal/PickExistingDeviceStep.js");
const require_PickNewPeripheralStep = require("./connectDeviceModal/PickNewPeripheralStep.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_materials = require("@pisell/materials");
let _ant_design_icons = require("@ant-design/icons");
require("../../devices/components/AddDeviceModal/index.less");
require("./ConnectExistingDeviceModal.less");
//#region src/plus/saasDevice/devicePlanning/modules/deviceConnections/components/ConnectExistingDeviceModal.tsx
const ConnectExistingDeviceModal = ({ open, mode, connectionType, targetStructure, currentDevice, editConnection, connectedDeviceIds, currentWorkAreaId, getText, translation, submitting, onClose, onSubmit, onUpdate }) => {
	var _workAreas$2;
	const [form] = antd.Form.useForm();
	const { step, workAreas, brands, models, selectedWorkAreaId, selectedModel, keyword, editFormValues, loading, detailLoading, pickingDeviceId, currentIsSmart, targetKind, peripheral, smartDevice, profileOptions, profileRequired, connectionTypes, filteredDevices, getWorkAreaDeviceCount, getDeviceCountText, setSelectedWorkAreaId, setKeyword, handlePickDevice, handlePickModel, handleBackToPick, handleSubmit } = require_useConnectDeviceModal.useConnectDeviceModal({
		open,
		mode,
		connectionType,
		targetStructure,
		currentDevice,
		editConnection,
		connectedDeviceIds,
		currentWorkAreaId,
		getText,
		translation,
		onSubmit,
		onUpdate
	});
	const selectedConnectionType = antd.Form.useWatch("connection_type", form);
	const networkMethod = antd.Form.useWatch("connection_method", form) || "auto";
	const newDeviceWorkAreaId = antd.Form.useWatch("workarea_id", form);
	const selectedTargetId = currentIsSmart ? peripheral === null || peripheral === void 0 ? void 0 : peripheral.id : smartDevice === null || smartDevice === void 0 ? void 0 : smartDevice.id;
	(0, react.useEffect)(() => {
		if (!open) return;
		form.resetFields();
		form.setFieldsValue({
			name: require_objectSpread2._objectSpread2({}, require_types.EMPTY_I18N),
			workarea_id: currentWorkAreaId,
			connection_method: "auto",
			profile_ids: []
		});
	}, [
		currentWorkAreaId,
		form,
		open
	]);
	(0, react.useEffect)(() => {
		if (!open || mode !== "edit" || !editFormValues) return;
		form.setFieldsValue(editFormValues);
	}, [
		editFormValues,
		form,
		mode,
		open
	]);
	(0, react.useEffect)(() => {
		var _workAreas$;
		if (!open || mode !== "new" || step !== "config" || !selectedModel) return;
		const nextName = translation(selectedModel.name) || selectedModel.code;
		form.setFieldsValue({
			name: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, require_types.EMPTY_I18N), {}, { original: `${nextName} 1` }),
			workarea_id: form.getFieldValue("workarea_id") || currentWorkAreaId || ((_workAreas$ = workAreas[0]) === null || _workAreas$ === void 0 ? void 0 : _workAreas$.id),
			connection_type: void 0,
			connection_method: "auto",
			connection_ip: void 0,
			profile_ids: []
		});
	}, [
		currentWorkAreaId,
		form,
		mode,
		open,
		selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.code,
		step,
		translation,
		(_workAreas$2 = workAreas[0]) === null || _workAreas$2 === void 0 ? void 0 : _workAreas$2.id
	]);
	(0, react.useEffect)(() => {
		if (!open || mode !== "existing" || step !== "config" || !selectedTargetId) return;
		form.setFieldsValue({
			connection_type: void 0,
			connection_method: "auto",
			connection_ip: void 0,
			profile_ids: []
		});
	}, [
		form,
		mode,
		open,
		selectedTargetId,
		step
	]);
	const handleValidateAndSubmit = function() {
		var _ref = require_asyncToGenerator._asyncToGenerator(function* () {
			handleSubmit(yield form.validateFields());
		});
		return function handleValidateAndSubmit() {
			return _ref.apply(this, arguments);
		};
	}();
	const renderPickStep = () => /* @__PURE__ */ react.default.createElement("div", { className: `device-detail-drawer__connect-picker is-${mode}` }, mode === "new" ? /* @__PURE__ */ react.default.createElement(require_PickNewPeripheralStep.default, {
		loading,
		models,
		brands,
		getText,
		translation,
		onSelect: handlePickModel
	}) : /* @__PURE__ */ react.default.createElement(require_PickExistingDeviceStep.default, {
		workAreas,
		selectedWorkAreaId,
		currentWorkAreaId,
		filteredDevices,
		connectedDeviceIds,
		loading,
		pickingDeviceId,
		keyword,
		targetKind,
		getText,
		translation,
		getWorkAreaDeviceCount,
		getDeviceCountText,
		onWorkAreaChange: setSelectedWorkAreaId,
		onKeywordChange: setKeyword,
		onPickDevice: handlePickDevice
	}));
	const renderConfigStep = () => /* @__PURE__ */ react.default.createElement("div", { className: "device-detail-drawer__connect-config" }, /* @__PURE__ */ react.default.createElement(require_DeviceConnectionSummary.default, {
		mode,
		smartDevice,
		peripheral,
		selectedModel,
		translation
	}), /* @__PURE__ */ react.default.createElement(antd.Form, {
		form,
		layout: "vertical",
		preserve: false
	}, mode === "new" ? /* @__PURE__ */ react.default.createElement(require_NewPeripheralInfoFields.default, {
		workAreas,
		workAreaId: newDeviceWorkAreaId,
		currentWorkAreaId,
		getText,
		translation
	}) : null, /* @__PURE__ */ react.default.createElement(require_ConnectionConfigFields.default, {
		connectionType: selectedConnectionType,
		networkMethod,
		profileRequired,
		profileOptions,
		connectionTypes,
		getText
	})));
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open,
		width: step === "pick" ? 980 : 860,
		okVisible: step === "config",
		okText: getText(mode === "edit" ? "pisell2.saas.device-planning.connect.update" : "pisell2.saas.device-planning.add.save"),
		cancelText: getText("pisell2.saas.device-planning.add.cancel"),
		okButtonProps: {
			block: true,
			size: "large",
			loading: submitting,
			onClick: handleValidateAndSubmit
		},
		cancelButtonProps: {
			block: true,
			size: "large",
			type: "default",
			onClick: onClose
		},
		title: /* @__PURE__ */ react.default.createElement(require_ConnectDeviceModalHeader.default, {
			mode,
			step,
			currentDevice,
			currentIsSmart,
			getText,
			translation,
			onBack: handleBackToPick
		}),
		closeIcon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.CloseOutlined, null),
		onCancel: onClose,
		className: "device-detail-drawer__connect-modal",
		bodyStyle: {
			padding: "24px",
			overflow: step === "pick" ? "hidden" : "auto"
		}
	}, step === "pick" ? renderPickStep() : /* @__PURE__ */ react.default.createElement(antd.Spin, { spinning: detailLoading }, renderConfigStep()));
};
//#endregion
exports.default = ConnectExistingDeviceModal;
