Bugs en wensen table

//bugs and wensen table

import { WorkItem } from "@/app/(licentie)/interfaces";
import {
  Badge,
  DataGrid,
  DataGridBody,
  DataGridCell,
  DataGridHeader,
  DataGridHeaderCell,
  DataGridRow,
  Menu,
  MenuItem,
  MenuList,
  MenuPopover,
  MenuTrigger,
  TableCellLayout,
  TableColumnDefinition,
  Tooltip,
  createTableColumn,
} from "@fluentui/react-components";
import { useRef } from "react";
import bugLogo from "../../../../../public/assets/Bug Rood.svg";
import wensLogo from "../../../../../public/assets/wens.svg";
import Image from "next/image";
import { useAppContext } from "@/app/context";
import Link from "next/link";
import { getImageFromLicentie } from "@/core/utils/functions";
import {DataGridProps} from "@fluentui-contrib/react-data-grid-react-window";

const columnSizingOptions = {
  code: {
    minWidth: 80,
    defaultWidth: 100,
  },
  title: {
    minWidth: 300,
    defaultWidth: 600,
  },
  type: {
    minWidth: 150,
    defaultWidth: 200,
  },
  week: {
    minWidth: 120,
    defaultWidth: 180,
  },
  link: {
    minWidth: 120,
    defaultWidth: 120,
  },
};

function BugsWensenTable({ workItems, sortState, onSortChange }: { workItems: WorkItem[], sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1];
  onSortChange: (e: React.MouseEvent, sortState: Parameters<NonNullable<DataGridProps["onSortChange"]>>[1]) => void; }) {
  const { userData } = useAppContext();
  const refMap = useRef<Record<string, HTMLElement | null>>({});

  const getIterationPath = (item: WorkItem) => {
    const parts = item.fullIteration!.split("\\");
    const waveString = parts[2];
    return waveString;
  };

  const newLicentieString = (path: string) => {
    const modifiedString = path.replace(/[^\\]+\\[\d.]+\s*/g, "");
    return getImageFromLicentie(modifiedString);
  };

  const dataBalkcolumns: TableColumnDefinition<WorkItem>[] = [
    createTableColumn<WorkItem>({
      columnId: "code",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Code";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Link
              href={`https://dev.azure.com/databalk/Debatic/_workitems/edit/${item.id}/`}
              target="_blank"
              style={{
                textDecoration: "underline",
                color: "#0e5f7f",
              }}
            >
              <Badge
                color="informative"
                style={{
                  textDecoration: "underline",
                }}
              >
                {item.id}
              </Badge>
            </Link>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "title",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Title";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Link
              href={`/ontwikkeling/${item.id}`}
              style={{
                color: "#0e5f7f",
                textDecoration: "underline",
              }}
            >
              {item.title}
            </Link>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "type",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Type";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout
            media={
              <Image
                src={item.type == "Product Backlog Item" ? wensLogo : bugLogo}
                width={30}
                height={30}
                alt="Bug icon"
              />
            }
          ></TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "fibo",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Fibo";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Badge>{item.fibo ?? -1}</Badge>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "path",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Licentie";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Tooltip
              content={newLicentieString(item?.path!).name}
              relationship="label"
            >
              <img
                src={newLicentieString(item?.path!).logo}
                alt="zaken-licentie"
                width={25}
                height={25}
              />
            </Tooltip>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "iteration",
      renderHeaderCell: () => {
        return "Versie";
      },
      renderCell: (item) => {
        return <TableCellLayout>{getIterationPath(item)}</TableCellLayout>;
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "full_iteration",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Sprint";
      },
      renderCell: (item) => {
        return <TableCellLayout>{item.iteration}</TableCellLayout>;
      },
    }),
  ];

  const columns: TableColumnDefinition<WorkItem>[] = [
    createTableColumn<WorkItem>({
      columnId: "code",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Code";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Badge color="informative">{item.id}</Badge>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "title",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Title";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Link
              href={`/ontwikkeling/${item.id}`}
              style={{
                color: "#0e5f7f",
                textDecoration: "underline",
              }}
            >
              {item.title}
            </Link>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "type",
      renderHeaderCell: () => {
        return "Type";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout
            media={
              <Image
                src={item.type == "Product Backlog Item" ? wensLogo : bugLogo}
                width={30}
                height={30}
                alt="Bug icon"
              />
            }
          ></TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "fibo",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Fibo";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Badge>{item.fibo ?? -1}</Badge>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "path",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Licentie";
      },
      renderCell: (item) => {
        return (
          <TableCellLayout>
            <Tooltip
              content={newLicentieString(item?.path!).name}
              relationship="label"
            >
              <img
                src={newLicentieString(item?.path!).logo}
                alt="zaken-licentie"
                width={25}
                height={25}
              />
            </Tooltip>
          </TableCellLayout>
        );
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "iteration",
      renderHeaderCell: () => {
        return "Versie";
      },
      renderCell: (item) => {
        return <TableCellLayout>{getIterationPath(item)}</TableCellLayout>;
      },
    }),
    createTableColumn<WorkItem>({
      columnId: "full_iteration",
      compare: (a,b) => 0,
      renderHeaderCell: () => {
        return "Sprint";
      },
      renderCell: (item) => {
        return <TableCellLayout>{item.iteration}</TableCellLayout>;
      },
    }),
  ];

  return (
    <div
      style={{
        backgroundColor: "white",
        overflowY: "hidden",
      }}
    >
      {workItems.length == 0 ? (
        <div
          style={{
            padding: "20px 30px",
            textAlign: "center",
            fontSize: "1.1rem",
          }}
        >
          Geen bugs of wensen
        </div>
      ) : (
        <DataGrid
          items={workItems}
          columns={
            userData?.mail.includes("databalk") ? dataBalkcolumns : columns
          }
          sortable
          selectionMode="multiselect"
          resizableColumns
          columnSizingOptions={columnSizingOptions}
          sortState={sortState}
          onSortChange={onSortChange}
        >
          <DataGridHeader>
            <DataGridRow selectionCell={{ "aria-label": "Select all rows" }}>
              {({ renderHeaderCell, columnId }, dataGrid) =>
                dataGrid.resizableColumns ? (
                  <Menu openOnContext>
                    <MenuTrigger>
                      <DataGridHeaderCell
                        ref={(el) => (refMap.current[columnId] = el)}
                      >
                        {renderHeaderCell()}
                      </DataGridHeaderCell>
                    </MenuTrigger>
                    <MenuPopover>
                      <MenuList>
                        <MenuItem
                          onClick={dataGrid.columnSizing_unstable.enableKeyboardMode(
                            columnId
                          )}
                        >
                          Keyboard Column Resizing
                        </MenuItem>
                      </MenuList>
                    </MenuPopover>
                  </Menu>
                ) : (
                  <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
                )
              }
            </DataGridRow>
          </DataGridHeader>
          <DataGridBody<WorkItem>>
            {({ item, rowId }) => (
              <DataGridRow<WorkItem>
                key={rowId}
                selectionCell={{ "aria-label": "Select row" }}
              >
                {({ renderCell }) => (
                  <DataGridCell>{renderCell(item)}</DataGridCell>
                )}
              </DataGridRow>
            )}
          </DataGridBody>
        </DataGrid>
      )}
    </div>
  );
}

export default BugsWensenTable;