const require_runtime = require("../../../../../_virtual/_rolldown/runtime.js");
const require_constants = require("../../constants.js");
const require_utils = require("../../utils.js");
const require_ModelPickerGrid = require("./ModelPickerGrid.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_materials = require("@pisell/materials");
let _ant_design_icons = require("@ant-design/icons");
//#region src/plus/saasDevice/devicePlanning/components/shared/DeviceModelPicker.tsx
const DeviceModelPicker = ({ activeKind, models, brands = [], getText, translation, onSelect }) => {
	const [keyword, setKeyword] = (0, react.useState)("");
	const [brandFilter, setBrandFilter] = (0, react.useState)();
	const [connectionFilter, setConnectionFilter] = (0, react.useState)();
	const isPeripheral = activeKind === "dumb";
	const brandNameMap = (0, react.useMemo)(() => {
		const map = /* @__PURE__ */ new Map();
		brands.forEach((brand) => {
			map.set(brand.code, translation(brand.name) || brand.code);
		});
		models.forEach((model) => {
			var _model$brand;
			if (model.brand_code && ((_model$brand = model.brand) === null || _model$brand === void 0 ? void 0 : _model$brand.name) && !map.has(model.brand_code)) map.set(model.brand_code, translation(model.brand.name) || model.brand_code);
		});
		return map;
	}, [
		brands,
		models,
		translation
	]);
	const brandOptions = (0, react.useMemo)(() => brands.map((brand) => ({
		label: translation(brand.name) || brand.code,
		value: require_utils.getBrandOptionValue(brand)
	})), [brands, translation]);
	const filteredModels = (0, react.useMemo)(() => {
		const value = require_constants.normalizeText(keyword);
		return models.filter((model) => {
			const name = translation(model.name);
			const connections = require_utils.getModelConnectionTypes(model);
			const matchesKeyword = value ? require_constants.normalizeText(name).includes(value) : true;
			const matchesBrand = brandFilter ? model.brand_code === require_utils.getBrandCodeFromOptionValue(brandFilter) : true;
			const matchesConnection = connectionFilter ? connections.some((connection) => require_constants.normalizeText(connection) === connectionFilter) : true;
			return matchesKeyword && matchesBrand && matchesConnection;
		});
	}, [
		brandFilter,
		connectionFilter,
		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 renderModelMeta = (model) => {
		if (!isPeripheral) return /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(model.description) || "");
		const brandName = model.brand_code ? brandNameMap.get(model.brand_code) || model.brand_code : "";
		const connections = require_utils.getModelConnectionTypes(model);
		return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-brand" }, brandName), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-desc" }, translation(model.description) || ""), connections.length ? /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__connection-list" }, connections.map((connection) => /* @__PURE__ */ react.default.createElement("span", {
			key: connection,
			className: "add-device-modal__connection-tag"
		}, require_utils.getConnectionTypeLabel(connection)))) : null);
	};
	return /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__body" }, /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__filters" }, /* @__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),
		className: "add-device-modal__search"
	}), isPeripheral ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, /* @__PURE__ */ react.default.createElement(_pisell_materials.Select, {
		allowClear: true,
		value: brandFilter,
		placeholder: getText("pisell2.saas.device-planning.add.all-brands"),
		options: brandOptions,
		onChange: (value) => setBrandFilter(value),
		className: "add-device-modal__filter-select"
	}), /* @__PURE__ */ react.default.createElement(_pisell_materials.Select, {
		allowClear: true,
		value: connectionFilter,
		placeholder: getText("pisell2.saas.device-planning.add.all-connections"),
		options: require_utils.CONNECTION_TYPE_OPTIONS,
		onChange: (value) => setConnectionFilter(value),
		className: "add-device-modal__filter-select"
	})) : null), /* @__PURE__ */ react.default.createElement("div", { className: "add-device-modal__model-list" }, groupedModels.length ? /* @__PURE__ */ react.default.createElement(require_ModelPickerGrid.default, {
		groups: groupedModels,
		classNamePrefix: "add-device-modal",
		groupTitleClassName: "add-device-modal__group-title",
		translation,
		onSelect,
		renderMeta: renderModelMeta,
		useButton: false
	}) : /* @__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")))
	})));
};
//#endregion
exports.default = DeviceModelPicker;
