var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/plus/saasDevice/appPeripheral/components/shared/DeviceModelPicker.tsx
var DeviceModelPicker_exports = {};
__export(DeviceModelPicker_exports, {
  default: () => DeviceModelPicker_default
});
module.exports = __toCommonJS(DeviceModelPicker_exports);
var import_react = __toESM(require("react"));
var import_materials = require("@pisell/materials");
var import_icons = require("@ant-design/icons");
var import_constants = require("../../constants");
var import_utils = require("../../utils");
var import_ModelPickerGrid = __toESM(require("./ModelPickerGrid"));
var DeviceModelPicker = ({
  activeKind,
  models,
  brands = [],
  getText,
  translation,
  onSelect
}) => {
  const [keyword, setKeyword] = (0, import_react.useState)("");
  const [brandFilter, setBrandFilter] = (0, import_react.useState)();
  const [connectionFilter, setConnectionFilter] = (0, import_react.useState)();
  const isPeripheral = activeKind === "dumb";
  const brandNameMap = (0, import_react.useMemo)(() => {
    const map = /* @__PURE__ */ new Map();
    brands.forEach((brand) => {
      map.set(brand.code, translation(brand.name) || brand.code);
    });
    models.forEach((model) => {
      var _a;
      if (model.brand_code && ((_a = model.brand) == null ? void 0 : _a.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, import_react.useMemo)(
    () => brands.map((brand) => ({
      label: translation(brand.name) || brand.code,
      value: (0, import_utils.getBrandOptionValue)(brand)
    })),
    [brands, translation]
  );
  const filteredModels = (0, import_react.useMemo)(() => {
    const value = (0, import_constants.normalizeText)(keyword);
    return models.filter((model) => {
      const name = translation(model.name);
      const connections = (0, import_utils.getModelConnectionTypes)(model);
      const matchesKeyword = value ? (0, import_constants.normalizeText)(name).includes(value) : true;
      const matchesBrand = brandFilter ? model.brand_code === (0, import_utils.getBrandCodeFromOptionValue)(brandFilter) : true;
      const matchesConnection = connectionFilter ? connections.some(
        (connection) => (0, import_constants.normalizeText)(connection) === connectionFilter
      ) : true;
      return matchesKeyword && matchesBrand && matchesConnection;
    });
  }, [brandFilter, connectionFilter, keyword, models, translation]);
  const groupedModels = (0, import_react.useMemo)(() => {
    const groups = /* @__PURE__ */ new Map();
    filteredModels.forEach((model) => {
      const key = model.type_code || getText(import_constants.DEVICE_KIND_LABEL_KEY[activeKind]);
      groups.set(key, [...groups.get(key) || [], model]);
    });
    return Array.from(groups.entries());
  }, [activeKind, filteredModels, getText]);
  const renderModelMeta = (model) => {
    const brandName = model.brand_code ? brandNameMap.get(model.brand_code) || model.brand_code : "";
    const connections = (0, import_utils.getModelConnectionTypes)(model);
    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__model-brand" }, brandName), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__model-desc" }, translation(model.description) || ""), connections.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__connection-list" }, connections.map((connection) => /* @__PURE__ */ import_react.default.createElement(
      "span",
      {
        key: connection,
        className: "saas-app-peripheral-add-device__connection-tag"
      },
      (0, import_utils.getConnectionTypeLabel)(connection)
    ))) : null);
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__body" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__filters" }, /* @__PURE__ */ import_react.default.createElement(
    import_materials.Input,
    {
      allowClear: true,
      prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
      value: keyword,
      placeholder: getText("pisell2.saas.device-planning.add.search"),
      onChange: (event) => setKeyword(event.target.value),
      className: "saas-app-peripheral-add-device__search"
    }
  ), isPeripheral ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    import_materials.Select,
    {
      allowClear: true,
      value: brandFilter,
      placeholder: getText(
        "pisell2.saas.device-planning.add.all-brands"
      ),
      options: brandOptions,
      onChange: (value) => setBrandFilter(value),
      className: "saas-app-peripheral-add-device__filter-select"
    }
  ), /* @__PURE__ */ import_react.default.createElement(
    import_materials.Select,
    {
      allowClear: true,
      value: connectionFilter,
      placeholder: getText(
        "pisell2.saas.device-planning.add.all-connections"
      ),
      options: import_utils.CONNECTION_TYPE_OPTIONS,
      onChange: (value) => setConnectionFilter(value),
      className: "saas-app-peripheral-add-device__filter-select"
    }
  )) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: "saas-app-peripheral-add-device__model-list" }, groupedModels.length ? /* @__PURE__ */ import_react.default.createElement(
    import_ModelPickerGrid.default,
    {
      groups: groupedModels,
      classNamePrefix: "saas-app-peripheral-add-device",
      groupTitleClassName: "saas-app-peripheral-add-device__group-title",
      translation,
      onSelect,
      renderMeta: renderModelMeta,
      useButton: false
    }
  ) : /* @__PURE__ */ import_react.default.createElement(
    import_materials.Empty,
    {
      image: import_materials.Empty.PRESENTED_IMAGE_SIMPLE,
      description: /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.no-devices")), /* @__PURE__ */ import_react.default.createElement("div", null, getText("pisell2.saas.device-planning.add.adjust-search")))
    }
  )));
};
var DeviceModelPicker_default = DeviceModelPicker;
