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

export default function LoginLogTable({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: 'ipAddr',
            field: 'ipAddr',
            headerName: 'IP Address',
            flex: 1,
        },
        {
            id: 'loginTime',
            field: 'loginTime',
            headerName: 'Login Time',
            flex: 1,
            renderCell: (params) => (
                <div>
                    {getDateString(params.row.loginTime, true)}
                </div>
            ),
            sortComparator: (v1, v2) => getDateString(v1,true).localeCompare(getDateString(v2,true))
        },{
            id: 'success',
            field: 'success',
            headerName: 'Success',
            flex: 1,
        },

    ];

    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: any) =>  row.username + row.loginTime}
            />

        </div>
    );
}
