import { DEVICE_KIND_LABEL_KEY, normalizeText } from "../../model/constants.js";
import { CONNECTION_TYPE_OPTIONS, getBrandCodeFromOptionValue, getBrandOptionValue, getConnectionTypeLabel, getModelConnectionTypes } from "../../shared/utils.js";
import ModelPickerGrid from "./ModelPickerGrid.js";
import React, { useMemo, useState } from "react";
import { Empty, Input, Select } from "@pisell/materials";
import { SearchOutlined } from "@ant-design/icons";
//#region src/plus/saasDevice/devicePlanning/components/shared/DeviceModelPicker.tsx
const DeviceModelPicker = ({ activeKind, models, brands = [], getText, translation, onSelect }) => {
	const [keyword, setKeyword] = useState("");
	const [brandFilter, setBrandFilter] = useState();
	const [connectionFilter, setConnectionFilter] = useState();
	const isPeripheral = activeKind === "dumb";
	const brandNameMap = 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 = useMemo(() => brands.map((brand) => ({
		label: translation(brand.name) || brand.code,
		value: getBrandOptionValue(brand)
	})), [brands, translation]);
	const filteredModels = useMemo(() => {
		const value = normalizeText(keyword);
		return models.filter((model) => {
			const name = translation(model.name);
			const connections = getModelConnectionTypes(model);
			const matchesKeyword = value ? normalizeText(name).includes(value) : true;
			const matchesBrand = brandFilter ? model.brand_code === getBrandCodeFromOptionValue(brandFilter) : true;
			const matchesConnection = connectionFilter ? connections.some((connection) => normalizeText(connection) === connectionFilter) : true;
			return matchesKeyword && matchesBrand && matchesConnection;
		});
	}, [
		brandFilter,
		connectionFilter,
		keyword,
		models,
		translation
	]);
	const groupedModels = useMemo(() => {
		const groups = /* @__PURE__ */ new Map();
		filteredModels.forEach((model) => {
			const key = model.type_code || getText(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.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 = getModelConnectionTypes(model);
		return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__model-brand" }, brandName), /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__model-desc" }, translation(model.description) || ""), connections.length ? /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__connection-list" }, connections.map((connection) => /* @__PURE__ */ React.createElement("span", {
			key: connection,
			className: "add-device-modal__connection-tag"
		}, getConnectionTypeLabel(connection)))) : null);
	};
	return /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__body" }, /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__filters" }, /* @__PURE__ */ React.createElement(Input, {
		allowClear: true,
		prefix: /* @__PURE__ */ React.createElement(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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(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.createElement(Select, {
		allowClear: true,
		value: connectionFilter,
		placeholder: getText("pisell2.saas.device-planning.add.all-connections"),
		options: CONNECTION_TYPE_OPTIONS,
		onChange: (value) => setConnectionFilter(value),
		className: "add-device-modal__filter-select"
	})) : null), /* @__PURE__ */ React.createElement("div", { className: "add-device-modal__model-list" }, groupedModels.length ? /* @__PURE__ */ React.createElement(ModelPickerGrid, {
		groups: groupedModels,
		classNamePrefix: "add-device-modal",
		groupTitleClassName: "add-device-modal__group-title",
		translation,
		onSelect,
		renderMeta: renderModelMeta,
		useButton: false
	}) : /* @__PURE__ */ React.createElement(Empty, {
		image: Empty.PRESENTED_IMAGE_SIMPLE,
		description: /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, getText("pisell2.saas.device-planning.add.no-devices")), /* @__PURE__ */ React.createElement("div", null, getText("pisell2.saas.device-planning.add.adjust-search")))
	})));
};
//#endregion
export { DeviceModelPicker as default };
