// material-ui
import * as React from 'react';
import {
    DataGrid,
} from "@mui/x-data-grid";
import {useEffect} from "react";
import {CustomNoRowsOverlay} from "../../utils/CommonFunction";

// ==============================|| EVENT TABLE ||============================== //

export default function ValidateResultTable({recordList, isMultiTable}) {
    const [rows, setRows] = React.useState(recordList);
    const [rowModesModel] = React.useState({});

    const [paginationModel, setPaginationModel] = React.useState({
        page: 0,
        pageSize:10
    });

    useEffect(() => {
        setPaginationModel({page:0,pageSize:10});
        setRows(recordList);
    }, [recordList]);


    const columns = isMultiTable ?
        [
            {
                id: 'rowId',
                field: 'rowId',
                headerName: 'Row #',
                width: 125,
                renderCell: (params) => {
                    return (
                        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                            {params.value}
                        </div>
                    );
                }
            },
            {
                id: 'pageName',
                field: 'pageName',
                headerName: 'Page Name',
                flex: 1,
                renderCell: (params) => (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                ),
            },
            {
                id: 'column',
                field: 'column',
                headerName: 'Column',
                flex: 1,
                renderCell: (params) => (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                ),
            },
            {
                id: 'remarks',
                field: 'remarks',
                headerName: 'Error Message',
                flex: 1.5,
                renderCell: (params) => (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                ),
            },
        ]
            :
        [
            {
                id: 'rowId',
                field: 'rowId',
                headerName: 'Row #',
                width: 125,
                renderCell: (params) => {
                    return (
                        <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                            {params.value}
                        </div>
                    );
                }
            },
            {
                id: 'column',
                field: 'column',
                headerName: 'Column',
                flex: 1,
                renderCell: (params) => (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                ),
            },
            {
                id: 'remarks',
                field: 'remarks',
                headerName: 'Error Message',
                flex: 1.5,
                renderCell: (params) => (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                ),
            },
        ]

    ;

    return (
        <DataGrid
            rows={rows}
            columns={columns}
            columnHeaderHeight={45}
            editMode="row"
            rowModesModel={rowModesModel}
            getRowHeight={() => 'auto'}
            paginationModel={paginationModel}
            onPaginationModelChange={setPaginationModel}
            slots={{
                noRowsOverlay: () => (
                    CustomNoRowsOverlay()
                )
            }}
            pageSizeOptions={[10]}
            autoHeight
        />
    );
}
