import React, { useEffect, useCallback, useState } 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();
  var _useState = useState((filterValue == null ? void 0 : filterValue[1]) || ""),
    query = _useState[0],
    setQuery = _useState[1];
  useEffect(function () {
    setFilterValue(function (old) {
      return [Comparisons[0], old == null ? void 0 : old[1]];
    });
  }, []);
  var handleComparisonChange = useCallback(function (value) {
    setFilterValue(function (old) {
      return [value, old == null ? void 0 : old[1]];
    });
  }, [setFilterValue]);
  var debouncedSetFilter = useCallback(debounce(300, function (value) {
    setFilterValue(function (old) {
      return [old == null ? void 0 : old[0], value];
    });
  }), [setFilterValue]);
  var handleValueChange = useCallback(function (e) {
    var value = e.target.value;
    setQuery(value);
    debouncedSetFilter(value);
  }, [debouncedSetFilter]);
  return /*#__PURE__*/React.createElement(Flex, {
    gap: 2
  }, /*#__PURE__*/React.createElement(DropdownFilter, {
    value: filterValue ? filterValue[0] : Comparisons[0],
    options: Comparisons,
    onChange: handleComparisonChange
  }), /*#__PURE__*/React.createElement(Box, {
    as: TextInput,
    width: {
      max: 50
    },
    value: query,
    onChange: handleValueChange,
    pattern: "[0-9]*(.[0-9]+)?",
    inputMode: "decimal",
    size: "tiny"
  }));
};
export default ComparisonFilter;