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_constants = require("../../constants.js");
const require_types = require("../../types.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 isProfileRequired = (model) => {
	var _model$data;
	return Boolean(model === null || model === void 0 || (_model$data = model.data) === null || _model$data === void 0 || (_model$data = _model$data.profile_structure) === null || _model$data === void 0 ? void 0 : _model$data.required);
};
const hasI18nValue = (value) => {
	if (!value) return false;
	return Object.values(value).some((item) => String(item || "").trim());
};
const AddDeviceModal = ({ open, activeKind, models, workAreaId, submitting, getText, translation, onClose, onSubmit }) => {
	const [form] = antd.Form.useForm();
	const [step, setStep] = (0, react.useState)("model");
	const [keyword, setKeyword] = (0, react.useState)("");
	const [selectedModel, setSelectedModel] = (0, react.useState)();
	const nameValue = antd.Form.useWatch("name", form);
	const profileValue = antd.Form.useWatch("profile_id", form);
	(0, react.useEffect)(() => {
		if (!open) return;
		setStep("model");
		setKeyword("");
		setSelectedModel(void 0);
		form.resetFields();
		form.setFieldsValue({ name: require_objectSpread2._objectSpread2({}, require_types.EMPTY_I18N) });
	}, [form, open]);
	const filteredModels = (0, react.useMemo)(() => {
		const value = require_constants.normalizeText(keyword);
		if (!value) return models;
		return models.filter((model) => {
			return [
				translation(model.name),
				translation(model.description),
				model.code,
				model.type_code
			].some((item) => require_constants.normalizeText(item || "").includes(value));
		});
	}, [
		keyword,
		models,
		translation
	]);
	const groupedModels = (0, react.useMemo)(() => {
		const groups = /* @__PURE__ */ new Map();
		filteredModels.forEach((model) => {
			const key = model.type_code || getText(require_constants.DEVICE_KIND_LABEL_KEY[activeKind]);
			groups.set(key, [...groups.get(key) || [], model]);
		});
		return Array.from(groups.entries());
	}, [
		activeKind,
		filteredModels,
		getText
	]);
	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: 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("div", { className: "add-device-modal__body" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Input, {
		allowClear: true,
		prefix: /* @__PURE__ */ react.default.createElement(_ant_design_icons.SearchOutlined, null),
		value: keyword,
		placeholder: getText("pisell2.saas.device-planning.add.search"),
		onChange: (event) => setKeyword(event.target.value)
	}), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-list" }, groupedModels.length ? groupedModels.map(([typeCode, items]) => {
		var _items$;
		const type = (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.type;
		const typeName = translation(type === null || type === void 0 ? void 0 : type.name) || typeCode;
		return /* @__PURE__ */ react.default.createElement("div", {
			key: typeCode,
			className: "add-device-modal__model-group"
		}, /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__group-title" }, (type === null || type === void 0 ? void 0 : type.icon) ? /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, { type: type === null || type === void 0 ? void 0 : type.icon }) : null, /* @__PURE__ */ react.default.createElement("span", null, typeName)), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-grid" }, items.map((model) => /* @__PURE__ */ react.default.createElement("div", {
			key: model.code,
			className: (0, classnames.default)("add-device-modal__model-card", { "is-selected": (selectedModel === null || selectedModel === void 0 ? void 0 : selectedModel.code) === model.code }),
			onClick: () => handleSelectModel(model)
		}, /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-name" }, translation(model.name) || ""), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(model.description) || "")))));
	}) : /* @__PURE__ */ react.default.createElement(_pisell_materials.Empty, {
		image: _pisell_materials.Empty.PRESENTED_IMAGE_SIMPLE,
		description: /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.no-devices")), /* @__PURE__ */ react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.adjust-search")))
	})));
	const renderConfigureStep = () => {
		var _selectedModel$type;
		return /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__body" }, selectedModel ? /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__selected-model" }, /* @__PURE__ */ react.default.createElement(_pisell_materials.Icon, { type: ((_selectedModel$type = selectedModel.type) === null || _selectedModel$type === void 0 ? void 0 : _selectedModel$type.icon) || "DesktopOutlined" }), /* @__PURE__ */ react.default.createElement("div", null, /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-name" }, translation(selectedModel.name) || ""), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(selectedModel.description) || ""))) : null, /* @__PURE__ */ react.default.createElement(antd.Form, {
			form,
			layout: "vertical",
			preserve: false
		}, /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: "name",
			label: getText("pisell2.saas.device-planning.add.device-name"),
			required: true,
			rules: [{ validator: require_types.validateI18nRequired(getText("pisell2.saas.device-planning.add.device-name-required")) }]
		}, /* @__PURE__ */ react.default.createElement(_pisell_materials.BaseTranslation, { renderMode: "edit" })), profileRequired ? /* @__PURE__ */ react.default.createElement(antd.Form.Item, {
			name: "profile_id",
			label: getText("pisell2.saas.device-planning.add.device-profile"),
			required: true,
			rules: [{
				required: true,
				message: getText("pisell2.saas.device-planning.add.device-profile-required")
			}],
			help: profiles.length === 0 ? getText("pisell2.saas.device-planning.add.create-profile-first") : void 0
		}, /* @__PURE__ */ react.default.createElement(_pisell_materials.Select, {
			disabled: profiles.length === 0,
			options: profiles.map((profile) => ({
				label: translation(profile.name) || String(profile.id),
				value: profile.id
			}))
		})) : null));
	};
	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"),
		footer: null,
		destroyOnClose: true,
		maskClosable: false,
		width: step === "model" ? 760 : 480,
		className: "add-device-modal",
		bodyStyle: { padding: "24px" }
	}, 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(), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__footer" }, step === "model" ? /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "text",
		onClick: onClose
	}, getText("pisell2.saas.device-planning.add.cancel")) : /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "text",
		onClick: () => setStep("model")
	}, getText("pisell2.saas.device-planning.add.back")), /* @__PURE__ */ react.default.createElement(_pisell_materials.Button, {
		type: "primary",
		disabled: !canSave,
		loading: submitting,
		onClick: handleSave
	}, getText("pisell2.saas.device-planning.add.save")))));
};
//#endregion
exports.default = AddDeviceModal;
