import { _objectSpread2 } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _asyncToGenerator } from "../../../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/asyncToGenerator.js";
import { EMPTY_I18N } from "../../../types.js";
import { useConnectDeviceModal } from "../hooks/useConnectDeviceModal.js";
import ConnectDeviceModalHeader from "./connectDeviceModal/ConnectDeviceModalHeader.js";
import ConnectionConfigFields from "./connectDeviceModal/ConnectionConfigFields.js";
import DeviceConnectionSummary from "./connectDeviceModal/DeviceConnectionSummary.js";
import NewPeripheralInfoFields from "./connectDeviceModal/NewPeripheralInfoFields.js";
import PickExistingDeviceStep from "./connectDeviceModal/PickExistingDeviceStep.js";
import PickNewPeripheralStep from "./connectDeviceModal/PickNewPeripheralStep.js";
import React, { useEffect } from "react";
import { Form, Spin } from "antd";
import { PisellModal } from "@pisell/materials";
import { CloseOutlined } from "@ant-design/icons";
import "../../AddDeviceModal/index.less";
import "./ConnectExistingDeviceModal.less";
//#region src/plus/saasDevice/devicePlanning/components/DeviceDetailDrawer/components/ConnectExistingDeviceModal.tsx
const ConnectExistingDeviceModal = ({ open, mode, currentDevice, editConnection, connectedDeviceIds, currentWorkAreaId, getText, translation, submitting, onClose, onSubmit, onUpdate }) => {
	var _workAreas$2;
	const [form] = Form.useForm();
	const { step, workAreas, brands, models, selectedWorkAreaId, selectedModel, keyword, editFormValues, loading, detailLoading, pickingDeviceId, currentIsSmart, targetKind, peripheral, smartDevice, profileOptions, profileRequired, filteredDevices, getWorkAreaDeviceCount, getDeviceCountText, setSelectedWorkAreaId, setKeyword, handlePickDevice, handlePickModel, handleBackToPick, handleSubmit } = useConnectDeviceModal({
		open,
		mode,
		currentDevice,
		editConnection,
		connectedDeviceIds,
		currentWorkAreaId,
		getText,
		translation,
		onSubmit,
		onUpdate
	});
	const connectionType = Form.useWatch("connection_type", form);
	const networkMethod = Form.useWatch("connection_method", form) || "auto";
	const newDeviceWorkAreaId = 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;
	useEffect(() => {
		if (!open) return;
		form.resetFields();
		form.setFieldsValue({
			name: _objectSpread2({}, EMPTY_I18N),
			workarea_id: currentWorkAreaId,
			connection_method: "auto",
			profile_ids: []
		});
	}, [
		currentWorkAreaId,
		form,
		open
	]);
	useEffect(() => {
		if (!open || mode !== "edit" || !editFormValues) return;
		form.setFieldsValue(editFormValues);
	}, [
		editFormValues,
		form,
		mode,
		open
	]);
	useEffect(() => {
		var _workAreas$;
		if (!open || mode !== "new" || step !== "config" || !selectedModel) return;
		const nextName = translation(selectedModel.name) || selectedModel.code;
		form.setFieldsValue({
			name: _objectSpread2(_objectSpread2({}, 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
	]);
	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 = _asyncToGenerator(function* () {
			handleSubmit(yield form.validateFields());
		});
		return function handleValidateAndSubmit() {
			return _ref.apply(this, arguments);
		};
	}();
	const renderPickStep = () => /* @__PURE__ */ React.createElement("div", { className: `device-detail-drawer__connect-picker is-${mode}` }, mode === "new" ? /* @__PURE__ */ React.createElement(PickNewPeripheralStep, {
		loading,
		models,
		brands,
		getText,
		translation,
		onSelect: handlePickModel
	}) : /* @__PURE__ */ React.createElement(PickExistingDeviceStep, {
		workAreas,
		selectedWorkAreaId,
		currentWorkAreaId,
		filteredDevices,
		connectedDeviceIds,
		loading,
		pickingDeviceId,
		keyword,
		targetKind,
		getText,
		translation,
		getWorkAreaDeviceCount,
		getDeviceCountText,
		onWorkAreaChange: setSelectedWorkAreaId,
		onKeywordChange: setKeyword,
		onPickDevice: handlePickDevice
	}));
	const renderConfigStep = () => /* @__PURE__ */ React.createElement("div", { className: "device-detail-drawer__connect-config" }, /* @__PURE__ */ React.createElement(DeviceConnectionSummary, {
		mode,
		smartDevice,
		peripheral,
		selectedModel,
		translation
	}), /* @__PURE__ */ React.createElement(Form, {
		form,
		layout: "vertical",
		preserve: false
	}, mode === "new" ? /* @__PURE__ */ React.createElement(NewPeripheralInfoFields, {
		workAreas,
		workAreaId: newDeviceWorkAreaId,
		currentWorkAreaId,
		getText,
		translation
	}) : null, /* @__PURE__ */ React.createElement(ConnectionConfigFields, {
		connectionType,
		networkMethod,
		profileRequired,
		profileOptions,
		getText
	})));
	return /* @__PURE__ */ React.createElement(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.createElement(ConnectDeviceModalHeader, {
			mode,
			step,
			currentDevice,
			currentIsSmart,
			getText,
			translation,
			onBack: handleBackToPick
		}),
		closeIcon: /* @__PURE__ */ React.createElement(CloseOutlined, null),
		onCancel: onClose,
		className: "device-detail-drawer__connect-modal",
		bodyStyle: {
			padding: "24px",
			overflow: step === "pick" ? "hidden" : "auto"
		}
	}, step === "pick" ? renderPickStep() : /* @__PURE__ */ React.createElement(Spin, { spinning: detailLoading }, renderConfigStep()));
};
//#endregion
export { ConnectExistingDeviceModal as default };
