import { NumericTextBox, NumericTextBoxChangeEvent } from "@progress/kendo-react-inputs";
import { GridFilterCellProps } from "@progress/kendo-react-grid";
import { Button } from "@progress/kendo-react-buttons";
import React, { useState } from "react";
import { DropDownList } from "@progress/kendo-react-dropdowns/dist/npm/DropDownList/DropDownList";
import { DropDownListChangeEvent } from "@progress/kendo-react-dropdowns";

type CustomNumericFilterCellProps = {
  gridFilterCellProps: GridFilterCellProps;
  format: string;
};

type NumericFilterOperatorType = {
  text: string;
  operator: string;
};

const numericFilterOperators: NumericFilterOperatorType[] = [
  { text: "Is equal to", operator: "eq" },
  { text: "Is not equal to", operator: "neq" },
  { text: "Is greater than or equal", operator: "gte" },
  { text: "Is greater than", operator: "gt" },
  { text: "Is less than or equal", operator: "lte" },
  { text: "Is less than", operator: "lt" },
  { text: "Is null", operator: "isnull" },
  { text: "Is not null", operator: "isnotnull" },
];

export const CustomNumericFilterCell = ({
  gridFilterCellProps,
  format,
}: CustomNumericFilterCellProps) => {
  const { onChange: filterCellPropsOnChange } = gridFilterCellProps;

  const [filterCellValue, setFilterCellValue] = useState<number | null>(null);
  const [isFilterActive, setIsFilterActive] = useState<boolean>(false);
  const [selectedOperator, setSelectedOperator] = useState<NumericFilterOperatorType>(
    numericFilterOperators[0]
  );

  const numericTextBoxOnChange = (event: NumericTextBoxChangeEvent) => {
    const { value: filterValue } = event.target;
    setFilterCellValue(filterValue);
    setIsFilterActive(true);

    filterCellPropsOnChange({
      value: filterValue,
      operator: filterValue ? selectedOperator.operator : "",
      syntheticEvent: event.syntheticEvent,
    });
  };

  const onButtonClearClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    event.preventDefault();
    setFilterCellValue(null);
    setIsFilterActive(false);
    setSelectedOperator(numericFilterOperators[0]);

    filterCellPropsOnChange({
      value: "",
      operator: "",
      syntheticEvent: event,
    });
  };

  const dropdownlistOnChange = (event: DropDownListChangeEvent) => {
    const operator = event.value as NumericFilterOperatorType;
    setSelectedOperator(operator);
  };

  return (
    <div className="k-filtercell">
      <NumericTextBox onChange={numericTextBoxOnChange} format={format} value={filterCellValue} />

      <DropDownList
        data={numericFilterOperators}
        textField="text"
        dataItemKey="operator"
        onChange={dropdownlistOnChange}
        value={numericFilterOperators.find((item) => item.operator === selectedOperator.operator)}
        className="k-button k-filtercell-clear"
        popupSettings={{ width: "180px" }}
      />

      <Button title="Clear" onClick={onButtonClearClick}>
        <span
          className={`k-icon k-i-filter-clear k-button-icon ${
            !isFilterActive ? "k-disabled" : "k-clear-button-visible"
          }`}
        />
      </Button>
    </div>
  );
};