import { ModalsProvider } from "@mantine/modals";
import { MantineReactTable, useMantineReactTable } from "mantine-react-table"
import { memo } from "react";
// import '../dataTableStyles.css';
import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
import '@mantine/dates/styles.css'; //if using mantine date picker features
import 'mantine-react-table/styles.css'; //import MRT styles

export function DataTableComponent({
    columns,
    tableData,
    isFetching,
    isLoading,
	onCreatingRowSave,
	onEditingRowSave,
}: any) {

    const table = useMantineReactTable({
        columns: columns,
		data: tableData,
		enableFacetedValues: true,
		enablePagination: false,
		enableRowVirtualization: true,
		enableEditing: true,
		createDisplayMode: "modal",
		editDisplayMode: "row",
		enableBottomToolbar: false,
		enableToolbarInternalActions: false,
		onCreatingRowSave: onCreatingRowSave,
		onEditingRowSave: onEditingRowSave,
		getRowId: (row: any) => row.id,
		initialState: {
			showProgressBars: isFetching,
			showLoadingOverlay: isLoading,
			isLoading: isLoading,
		},
		state: {
			showProgressBars: isFetching,
			showLoadingOverlay: isLoading,
			isLoading: isLoading,
		},
        // mantineToolbarAlertBannerBadgeProps: {
		// 	style: {
		// 		color: "red",
		// 	},
		// },
		// mantineTopToolbarProps: {
		// 	style: {
		// 		color: "var(--color-text-pri)",
		// 		background: "var(--color-background)",
		// 		border: "none",
		// 		boxShadow: "none",
		// 	},
		// },
		// mantineTableHeadProps: {
		// 	style: {
		// 		boxShadow: "none",
		// 	},
		// },
		// mantineTableHeadCellProps: {
		// 	style: {
		// 		color: "var(--color-text-pri)",
		// 		background: "var(--color-background)",
		// 		borderRight: "none",
		// 		borderLeft: "none",
		// 	},
		// },
		// mantineTableBodyCellProps: {
		// 	style: {
		// 		background: "var(--color-background)",
		// 		borderRight: "none",
		// 		borderLeft: "none",
		// 	},
		// },
		// mantinePaperProps: {
		// 	style: {
		// 		border: "none",
		// 		boxShadow: "none",
		// 		background: "var(--color-background)",
		// 	},
		// },
		// mantineTableContainerProps: {
		// 	style: {
		// 		border: "none",
		// 		boxShadow: "none",
		// 		background: "var(--color-background)",
		// 	},
		// },
	});
	return (
			<ModalsProvider>
				<MantineReactTable table={table} />
			</ModalsProvider>
	);
}

export const DataTable = memo(DataTableComponent);

export default DataTable;