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_utils = require("../../utils.js");
const require_types = require("../../types.js");
const require_DeviceBasicInfoForm = require("../shared/DeviceBasicInfoForm.js");
const require_DeviceModelPicker = require("../shared/DeviceModelPicker.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let _pisell_materials = require("@pisell/materials");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let _ant_design_icons = require("@ant-design/icons");
require("./index.less");
//#region src/plus/saasDevice/devicePlanning/components/AddDeviceModal/index.tsx
const AddDeviceModal = ({ open, activeKind, models, brands = [], workAreaId, submitting, getText, translation, onClose, onSubmit }) => {
	const [form] = antd.Form.useForm();
	const [step, setStep] = (0, react.useState)("model");
	const [selectedModel, setSelectedModel] = (0, react.useState)();
	const nameValue = antd.Form.useWatch("name", form);
	const profileValue = antd.Form.useWatch("profile_id", form);
	const isPeripheral = activeKind === "dumb";
	(0, react.useEffect)(() => {
		if (!open) return;
		setStep("model");
		setSelectedModel(void 0);
		form.resetFields();
		form.setFieldsValue({ name: require_objectSpread2._objectSpread2({}, require_types.EMPTY_I18N) });
	}, [form, open]);
	const profileRequired = require_utils.isProfileRequired(selectedModel);
	const profiles = (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.active_profiles) || [];
	const canSave = Boolean(workAreaId && selectedModel && require_utils.hasI18nValue(nameValue) && (!profileRequired || profiles.length > 0) && (!profileRequired || Boolean(profileValue)));
	const handleSelectModel = (model) => {
		setSelectedModel(model);
		setStep("configure");
		form.resetFields();
		form.setFieldsValue({
			name: require_objectSpread2._objectSpread2({}, require_types.EMPTY_I18N),
			profile_id: void 0
		});
	};
	const handleSave = function() {
		var _ref = require_asyncToGenerator._asyncToGenerator(function* () {
			if (!canSave || !selectedModel || !workAreaId) return;
			const values = yield form.validateFields();
			onSubmit({
				workarea_id: workAreaId,
				model_code: selectedModel.code,
				profile_id: profileRequired ? values.profile_id || null : null,
				name: values.name
			});
		});
		return function handleSave() {
			return _ref.apply(this, arguments);
		};
	}();
	const renderModelStep = () => /* @__PURE__ */ react.default.createElement(require_DeviceModelPicker.default, {
		activeKind,
		models,
		brands,
		getText,
		translation,
		onSelect: handleSelectModel
	});
	const renderConfigureStep = () => /* @__PURE__ */ react.default.createElement(require_DeviceBasicInfoForm.default, {
		form,
		selectedModel,
		profiles,
		profileRequired,
		showProfile: true,
		getText,
		translation
	});
	return /* @__PURE__ */ react.default.createElement(_pisell_materials.PisellModal, {
		open,
		onCancel: onClose,
		title: step === "model" ? getText(`pisell2.saas.device-planning.add.title.${activeKind}`) : getText("pisell2.saas.device-planning.add.configure-title"),
		okVisible: step === "configure",
		okText: getText("pisell2.saas.device-planning.add.save"),
		cancelText: getText(step === "model" ? "pisell2.saas.device-planning.add.cancel" : "pisell2.saas.device-planning.add.back"),
		okButtonProps: {
			block: true,
			size: "large",
			disabled: !canSave,
			loading: submitting,
			onClick: handleSave
		},
		cancelButtonProps: {
			block: true,
			size: "large",
			type: "default",
			onClick: step === "model" ? onClose : () => setStep("model")
		},
		destroyOnClose: true,
		maskClosable: false,
		width: step === "model" ? "980px" : "480px",
		className: (0, classnames.default)("add-device-modal", { "is-peripheral": isPeripheral && step === "model" }),
		bodyStyle: {
			padding: "24px",
			overflow: step === "model" ? "hidden" : "auto"
		}
	}, step === "configure" ? /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "text",
		icon: /* @__PURE__ */ react.default.createElement(_ant_design_icons.ArrowLeftOutlined, null),
		className: "add-device-modal__back-icon",
		onClick: () => setStep("model")
	}) : null, step === "model" ? renderModelStep() : renderConfigureStep());
};
//#endregion
exports.default = AddDeviceModal;
