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

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

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

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

    const columns = [
        {
            id: 'userName',
            field: 'username',
            headerName: 'Username',
            flex: 1,
        },
        {
            id: 'actionDesc',
            field: 'actionDesc',
            headerName: 'Action Description',
            flex: 3,
        },
        {
            id: 'created',
            field: 'created',
            headerName: 'Action Time',
            flex: 1,
            sortComparator: dateComparator,
            renderCell: (params) => (
                <div>
                    {getDateString(params.row.created, 'dd/MM/yyyy HH:mm:ss')}
                </div>
            ),
        },

    ];

    return (
        <div style={{/*height: '65vh',*/ width: '100%'}}>
            <DataGrid
                rows={rows}
                columns={columns}
                columnHeaderHeight={45}
                editMode="row"
                getRowHeight={() => 'auto'}
                initialState={{
                    pagination: {
                        paginationModel: {page: 0, pageSize: 15},
                    },
                }}
                paginationModel={paginationModel}
                onPaginationModelChange={setPaginationModel}
                slots={{
                    noRowsOverlay: () => (
                        CustomNoRowsOverlay()
                    )
                }}
                pageSizeOptions={[15]}
                autoHeight
                getRowId={(row) => row.username + row.created + row.refId + row.refType}
            />

        </div>
    );
}
