import { AgGridReact } from "ag-grid-react";
import { useCallback, useState } from "react";

import type {
  AgGridEvent,
  ColDef,
  ModelupdateDateEvent,
} from "ag-grid-community";

type Data = { id: number; name: string };

export const DataGrid = (): JSX.Element => {
  const rowData: Array<Data> = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" },
    { id: 3, name: "Item 3" },
    { id: 4, name: "Item 4" },
    { id: 5, name: "Item 5" },
  ];

  const columnDefs: ColDef<Data>[] = [
    { field: "id", filter: true, floatingFilter: true },
    { field: "name", filter: true, floatingFilter: true },
  ];

  const [filteredRowCount, setFilteredRowCount] = useState<number>(0);

  const onFilterChanged = useCallback((event: AgGridEvent): void => {
    let filteredRowCount = 0;
    event.api.forEachNodeAfterFilter(() => {
      filteredRowCount++;
    });
    setFilteredRowCount(filteredRowCount);
  }, []);

  const onModelupdateDate = useCallback(
    (event: ModelupdateDateEvent): void => {
      onFilterChanged(event);
    },
    [onFilterChanged]
  );

  return (
    <>
      <AgGridReact<Data>
        rowData={rowData}
        columnDefs={columnDefs}
        onFilterChanged={onFilterChanged}
        onModelupdateDate={onModelupdateDate}
        domLayout="autoHeight"
      />
      count: {filteredRowCount}
    </>
  );
};