import { createElement } from "react";
import { Component, QueryLanguage, wrapFilterInHasOnes, Field } from "@contember/binding";
import { Stack, Select, NumberInput } from "@contember/ui";
import { dataGridCellsDictionary } from "./dataGridCellsDictionary.js";
import { DataGridColumn } from "../base/DataGridColumn.js";
import { useMessageFormatter } from "../../../../../i18n/useMessageFormatter.js";
import { FieldFallbackView } from "../../../fieldViews/FieldFallbackView.js";
const NumberCell = Component((props) => {
  return /* @__PURE__ */ createElement(DataGridColumn, {
    ...props,
    enableOrdering: !props.disableOrder,
    getNewOrderBy: (newDirection, { environment }) => newDirection ? QueryLanguage.desugarOrderBy(`${props.field} ${newDirection}`, environment) : void 0,
    getNewFilter: (filter, { environment }) => {
      if (filter.query === null) {
        return void 0;
      }
      const baseOperators = {
        eq: "eq",
        gte: "gte",
        lte: "lte"
      };
      const condition = {
        [baseOperators[filter.mode]]: filter.query
      };
      const desugared = QueryLanguage.desugarRelativeSingleField(props, environment);
      return wrapFilterInHasOnes(desugared.hasOneRelationPath, {
        [desugared.field]: condition
      });
    },
    emptyFilter: {
      mode: "eq",
      query: null
    },
    filterRenderer: ({ filter, setFilter }) => {
      const formatMessage = useMessageFormatter(dataGridCellsDictionary);
      const options = [
        { value: "eq", label: formatMessage("dataGridCells.numberCell.equals") },
        { value: "gte", label: formatMessage("dataGridCells.numberCell.greaterThan") },
        { value: "lte", label: formatMessage("dataGridCells.numberCell.lessThan") }
      ];
      return /* @__PURE__ */ createElement(Stack, {
        direction: "horizontal"
      }, /* @__PURE__ */ createElement(Select, {
        notNull: true,
        value: filter.mode,
        options,
        onChange: (value) => {
          if (!value) {
            return;
          }
          setFilter({
            ...filter,
            mode: value
          });
        }
      }), /* @__PURE__ */ createElement(NumberInput, {
        value: filter.query,
        placeholder: "Value",
        onChange: (value) => {
          setFilter({
            ...filter,
            query: value ?? null
          });
        }
      }));
    }
  }, /* @__PURE__ */ createElement(Field, {
    ...props,
    format: (value) => {
      if (value === null) {
        return /* @__PURE__ */ createElement(FieldFallbackView, {
          fallback: props.fallback,
          fallbackStyle: props.fallbackStyle
        });
      }
      if (props.format) {
        return props.format(value);
      }
      return value;
    }
  }));
}, "NumberCell");
export { NumberCell };
//# sourceMappingURL=NumberCell.js.map
