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 "../../../../model/types.js";
import { hasI18nValue, isProfileRequired } from "../../../../shared/utils.js";
import DeviceModelPicker from "../../../../components/shared/DeviceModelPicker.js";
import DeviceBasicInfoForm from "../../../../components/shared/DeviceBasicInfoForm.js";
import React, { useEffect, useState } from "react";
import { Form } from "antd";
import { Button as Button$1, PisellModal } from "@pisell/materials";
import classNames from "classnames";
import { ArrowLeftOutlined } from "@ant-design/icons";
import "./index.less";
//#region src/plus/saasDevice/devicePlanning/modules/devices/components/AddDeviceModal/index.tsx
const AddDeviceModal = ({ open, activeKind, models, brands = [], workAreaId, submitting, getText, translation, onClose, onSubmit }) => {
	const [form] = Form.useForm();
	const [step, setStep] = useState("model");
	const [selectedModel, setSelectedModel] = useState();
	const nameValue = Form.useWatch("name", form);
	const profileValue = Form.useWatch("profile_id", form);
	const isPeripheral = activeKind === "dumb";
	useEffect(() => {
		if (!open) return;
		setStep("model");
		setSelectedModel(void 0);
		form.resetFields();
		form.setFieldsValue({ name: _objectSpread2({}, EMPTY_I18N) });
	}, [form, open]);
	const profileRequired = isProfileRequired(selectedModel);
	const profiles = (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.active_profiles) || [];
	const canSave = Boolean(workAreaId && selectedModel && hasI18nValue(nameValue) && (!profileRequired || profiles.length > 0) && (!profileRequired || Boolean(profileValue)));
	const handleSelectModel = (model) => {
		setSelectedModel(model);
		setStep("configure");
		form.resetFields();
		form.setFieldsValue({
			name: _objectSpread2({}, EMPTY_I18N),
			profile_id: void 0
		});
	};
	const handleSave = function() {
		var _ref = _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.createElement(DeviceModelPicker, {
		activeKind,
		models,
		brands,
		getText,
		translation,
		onSelect: handleSelectModel
	});
	const renderConfigureStep = () => /* @__PURE__ */ React.createElement(DeviceBasicInfoForm, {
		form,
		selectedModel,
		profiles,
		profileRequired,
		showProfile: true,
		getText,
		translation
	});
	return /* @__PURE__ */ React.createElement(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: classNames("add-device-modal", { "is-peripheral": isPeripheral && step === "model" }),
		bodyStyle: {
			padding: "24px",
			overflow: step === "model" ? "hidden" : "auto"
		}
	}, step === "configure" ? /* @__PURE__ */ React.createElement(Button$1, {
		type: "text",
		icon: /* @__PURE__ */ React.createElement(ArrowLeftOutlined, null),
		className: "add-device-modal__back-icon",
		onClick: () => setStep("model")
	}) : null, step === "model" ? renderModelStep() : renderConfigureStep());
};
//#endregion
export { AddDeviceModal as default };
