Incident table

//incident table

import React, { useState } from "react";
import Pagination from "@/components/general/pagination/"
import {
  DataGrid,
  DataGridHeader,
  DataGridRow,
  DataGridHeaderCell,
  DataGridBody,
  DataGridCell,
  RowRenderer,
  DataGridProps,
} from "@fluentui-contrib/react-data-grid-react-window";
import { TableColumnDefinition, useFluent, useScrollbarWidth } from "@fluentui/react-components";

interface TableProps<TItem> {
  items: Array<TItem>;
  columns: TableColumnDefinition<TItem>[];
  columnSizingOptions: any;
  sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1];
  onSortChange: (e: React.MouseEvent, sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]) => void;
}

const tableStyles: React.CSSProperties = {
  backgroundColor: "transparent",
  borderRadius: "5px",
  width: "80vw",
  marginTop: "4.5em",
};
const headerStyles = {
  borderBottom: "1px solid lightgrey",
  backgroundColor: "white"
};

const Table = ({ items, columns, columnSizingOptions, sortState, onSortChange }: TableProps<any>) => {
  const [currentPage, setCurrentPage] = useState(1);
  const { targetDocument } = useFluent();
  const scrollbarWidth = useScrollbarWidth({ targetDocument });
  const [sortedItems, setSortedItems] = useState(items)

  const handlePageChange = (pageNumber: number) => {
    setCurrentPage(pageNumber);
  };

  const itemsPerPage = 13;

  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = Math.min(startIndex + itemsPerPage, items.length);
  let visibleItems = items.slice(startIndex, endIndex);

  const RenderRow: RowRenderer<any> = ({ item, rowId }) => {
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
      setIsHovered(true);
    };

    const handleMouseLeave = () => {
      setIsHovered(false);
    };

    const rowStyle = {
      borderBottom: "1px solid lightgrey",
      height: "4em",
      backgroundColor: "#f6f6f6",
      ...(isHovered && { backgroundColor: "#e5e5e5" })
    };

    return (
        <DataGridRow<any>
            key={rowId}
            style={rowStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
          {({ renderCell }) => <DataGridCell>{renderCell(item)}</DataGridCell>}
        </DataGridRow>
    );
  };

  return (
      <div style={tableStyles}>
        <>
          <DataGrid
              items={visibleItems}
              columns={columns}
              focusMode="composite"
              sortable
              resizableColumns
              style={{ width: "max-content" }}
              size="extra-small"
              columnSizingOptions={
                columnSizingOptions ? columnSizingOptions : null
              }
              sortState={sortState}
              onSortChange={onSortChange}
          >
            <DataGridHeader style={{ paddingRight: scrollbarWidth, ...headerStyles }}>
              <DataGridRow>
                {({ renderHeaderCell }) => (
                    <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
                )}
              </DataGridRow>
            </DataGridHeader>
            <DataGridBody itemSize={50} height={visibleItems.length * 50}>
              {RenderRow}
            </DataGridBody>
          </DataGrid>
          <Pagination
              totalItems={items.length}
              itemsPerPage={itemsPerPage}
              currentPage={currentPage}
              onPageChange={handlePageChange}
          />
        </>
      </div>
  );
};

export default Table;