import { useMemo, createElement, Fragment } from "react";
import { FieldContainer, Checkbox } from "@contember/ui";
import { useSelectOptions } from "../../../fields/ChoiceField/hooks/useSelectOptions.js";
import { dataGridCellsDictionary } from "./dataGridCellsDictionary.js";
import { useCurrentlyChosenEntities } from "../../../fields/ChoiceField/hooks/useCurrentlyChosenEntities.js";
import { MultiSelectFieldInner } from "../../../fields/SelectField/MultiSelectField.js";
import { useMessageFormatter } from "../../../../../i18n/useMessageFormatter.js";
const SelectCellFilter = ({ filter, setFilter, optionProps }) => {
  const currentlyChosenEntities = useCurrentlyChosenEntities(optionProps, filter.id);
  const { options, allOptions, onSearch, isLoading } = useSelectOptions(optionProps, currentlyChosenEntities);
  const currentValues = useMemo(() => {
    return allOptions.filter((it) => filter.id.includes(it.value.id));
  }, [filter.id, allOptions]);
  const formatMessage = useMessageFormatter(dataGridCellsDictionary);
  return /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(MultiSelectFieldInner, {
    label: void 0,
    data: options,
    onAdd: (val) => setFilter({ ...filter, id: [...filter.id, val.value.id] }),
    onRemove: (val) => setFilter({ ...filter, id: filter.id.filter((it) => it !== val.value.id) }),
    errors: void 0,
    currentValues,
    onClear: () => {
      setFilter({ ...filter, id: [] });
    },
    onSearch,
    isLoading
  }), /* @__PURE__ */ createElement(FieldContainer, {
    label: /* @__PURE__ */ createElement("span", {
      style: { whiteSpace: "nowrap" }
    }, formatMessage("dataGridCells.textCell.includeNull", {
      strong: (chunks) => /* @__PURE__ */ createElement("strong", null, chunks)
    })),
    labelPosition: "labelInlineRight"
  }, /* @__PURE__ */ createElement(Checkbox, {
    notNull: true,
    value: filter.nullCondition,
    onChange: (checked) => {
      setFilter({
        ...filter,
        nullCondition: !!checked
      });
    }
  })));
};
export { SelectCellFilter };
//# sourceMappingURL=SelectCellFilter.js.map
