import { FieldContainer, Checkbox } from "@contember/ui";
import { useMemo } from "react";
import { useSelectOptions } from "../../../fields/ChoiceField/hooks/useSelectOptions.js";
import { dataGridCellsDictionary } from "./dataGridCellsDictionary.js";
import { useCurrentlyChosenEntities } from "../../../fields/ChoiceField/hooks/useCurrentlyChosenEntities.js";
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
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__ */ jsxs(Fragment, {
    children: [/* @__PURE__ */ jsx(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__ */ jsx(FieldContainer, {
      label: /* @__PURE__ */ jsx("span", {
        style: {
          whiteSpace: "nowrap"
        },
        children: formatMessage("dataGridCells.textCell.includeNull", {
          strong: (chunks) => /* @__PURE__ */ jsx("strong", {
            children: chunks
          })
        })
      }),
      labelPosition: "labelInlineRight",
      children: /* @__PURE__ */ jsx(Checkbox, {
        notNull: true,
        value: filter.nullCondition,
        onChange: (checked) => {
          setFilter({
            ...filter,
            nullCondition: !!checked
          });
        }
      })
    })]
  });
};
export {
  SelectCellFilter
};
//# sourceMappingURL=SelectCellFilter.js.map
