import {
    MRT_ColumnDef,
    type MRT_Cell,
    type MRT_Row,
    type MRT_TableInstance,
    MRT_TableState,
    MantineReactTable,
    useMantineReactTable,
} from "mantine-react-table";
import { type OnChangeFn, type RowSelectionState } from "@tanstack/table-core";
import { Text } from "@mantine/core";

export type RowActionsProps<T extends object> = (props: {
    cell: MRT_Cell<T>;
    row: MRT_Row<T>;
    table: MRT_TableInstance<T>;
}) => React.ReactNode;

export type DetailPanelProps<T extends object> = (props: {
    row: MRT_Row<T>;
    table: MRT_TableInstance<T>;
}) => React.ReactNode;

export type TopToolbarCustomActionsProps<T extends object> = (props: {
    table: MRT_TableInstance<T>;
}) => React.ReactNode;

interface Props<T extends object> {
    columns: MRT_ColumnDef<T>[];
    data: T[];
    renderRowActions?: RowActionsProps<T> | undefined;
    renderDetailPanel?: DetailPanelProps<T> | undefined;
    renderTopToolbarCustomActions?: TopToolbarCustomActionsProps<T> | undefined;
    state?: Partial<MRT_TableState<T>> | undefined;
    enableRowSelection?: boolean;
    onRowSelectionChange?: OnChangeFn<RowSelectionState> | undefined;
    getRowId?:
        | ((
              originalRow: T,
              index: number,
              parentRow: MRT_Row<T>
          ) => string | undefined)
        | undefined;
    enablePagination?: boolean;
    columnPinningColumns?: string;
    enableStickyHeader?: boolean;
    enableStickyFooter?: boolean;
    enableGlobalFilter?: boolean;
    enableColumnFilters?: boolean;
}

export default function Table<T extends object>({
    columns,
    data,
    renderRowActions,
    renderDetailPanel,
    renderTopToolbarCustomActions,
    state,
    enableRowSelection = false,
    onRowSelectionChange,
    getRowId,
    enablePagination = true,
    columnPinningColumns = "",
    enableStickyHeader = false,
    enableStickyFooter = false,
    enableGlobalFilter = true,
    enableColumnFilters = true,
}: Props<T>) {
    const table = useMantineReactTable({
        columns,
        data,
        columnFilterDisplayMode: "popover",
        enableRowActions: renderRowActions ? true : false,
        enableExpanding: renderDetailPanel ? true : false,
        enablePinning: true,
        positionActionsColumn: "last",
        renderRowActions,
        renderDetailPanel,
        renderTopToolbarCustomActions,
        enableRowSelection,
        onRowSelectionChange,
        getRowId,
        enableStickyHeader: enableStickyHeader,
        enableStickyFooter: enableStickyFooter,
        enableGlobalFilter: enableGlobalFilter,
        enableColumnFilters: enableColumnFilters,
        mantinePaperProps: {
            shadow: "none",
            withBorder: false,
        },
        initialState: {
            columnPinning: {
                right: ["mrt-row-actions"],
                left: [columnPinningColumns],
            },
            columnVisibility: {
                // assigned_to: false,
            },
            density: "xs",
        },
        state: {
            ...state,
        },
        // enableRowNumbers: true,
        enableGlobalFilterRankedResults: true,
        rowNumberMode: "original",
        paginationDisplayMode: "pages",
        enablePagination: enablePagination,
        renderEmptyRowsFallback: ({ table }) => (
            <Text color="dimmed" align="center" my={"sm"}>
                No records to display
            </Text>
        ),
    });

    return <MantineReactTable table={table} />;
}