import React, { useEffect } from "react";
import DropdownFilter from "./dropdown";
import Box from "../../../../templates/box";
import Flex from "../../../../templates/flex";
import { TextInput } from "../../../../input";
import { debounce } from "throttle-debounce";
var Comparisons = [{
  value: "all",
  label: "All"
}, {
  value: "gt",
  label: "Greater than"
}, {
  value: "eq",
  label: "Equal"
}, {
  value: "lt",
  label: "Less than"
}];
var ComparisonFilter = function ComparisonFilter(_ref) {
  var column = _ref.column;
  var setFilterValue = column.setFilterValue,
    getFilterValue = column.getFilterValue;
  var filterValue = getFilterValue();
  useEffect(function () {
    setFilterValue(function (old) {
      return [Comparisons[0], old == null ? void 0 : old[1]];
    });
  }, []);
  return /*#__PURE__*/React.createElement(Flex, {
    gap: 2
  }, /*#__PURE__*/React.createElement(DropdownFilter, {
    value: filterValue ? filterValue[0] : Comparisons[0],
    options: Comparisons,
    onChange: function onChange(value) {
      return setFilterValue(function (old) {
        return [value, old == null ? void 0 : old[1]];
      });
    }
  }), /*#__PURE__*/React.createElement(Box, {
    as: TextInput,
    width: {
      max: 50
    },
    value: filterValue ? filterValue[1] : null,
    onChange: debounce(300, function (e) {
      e.persist();
      setFilterValue(function (old) {
        return [old == null ? void 0 : old[0], e.target.value];
      });
    }),
    pattern: "[0-9]*(.[0-9]+)?",
    inputMode: "decimal",
    size: "tiny"
  }));
};
export default ComparisonFilter;