// material-ui
import * as React from 'react';
import {
    DataGrid, GridActionsCellItem,
} from "@mui/x-data-grid";
import {useEffect} from "react";
import {CustomNoRowsOverlay, getDateString} from "../../utils/CommonFunction";
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import AuditLogDetailWindow from "./AuditLogDetailWindow";
import {LIONER_FORM_THEME} from "../../themes/themeConst";
import {ThemeProvider} from "@emotion/react";

export default function AuditLogTable({recordList, pageSize,tableName}) {
    const [rows, setRows] = React.useState([]);
    // ==============================|| DELETE WINDOW RELATED ||============================== //
    const [isWindowOpen, setIsWindowOpen] = React.useState(false);
    const [selectedAuditLog, setSelectedAuditLog] = React.useState({});

    const handleClose = () => {
        setIsWindowOpen(false);
    };
    // ==============================|| DELETE WINDOW RELATED ||============================== //

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

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

    function handleViewClick(params){
        setSelectedAuditLog(params.row);
        setIsWindowOpen(true);

    }

    const columns = [
        {
            field: 'actions',
            type: 'actions',
            headerName: 'Actions',
            width: 100,
            cellClassName: 'actions',
            getActions: (params) => {
                return [
                    <GridActionsCellItem
                        key="OutSave"
                        icon={<ManageSearchIcon sx={{fontSize: 25}}/>}
                        label="view"
                        className="textPrimary"
                        onClick={()=>handleViewClick(params)}
                    />]
            },
        },
        {
            id: 'recordId',
            field: 'recordId',
            headerName: 'Record Id',
            flex: 0.3,
        },
        {
            id: 'recordName',
            field: 'recordName',
            headerName: 'Record',
            flex: 1.75,
            renderCell: (params) => {
                return (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                );
            }
        },
        {
            id: 'modified',
            field: 'modified',
            headerName: 'Modified Date',
            flex: 0.4,
            renderCell: (params) => (
                <div>
                    {getDateString(params.row.modified, true)}
                </div>
            ),
            sortComparator: (v1, v2) => getDateString(v1,true).localeCompare(getDateString(v2,true))
        },
        {
            id: 'modifiedBy',
            field: 'username',
            headerName: 'Modified By',
            flex: 0.5,
            renderCell: (params) => {
                return (
                    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
                        {params.value}
                    </div>
                );
            }
        },
        /*{
            id: 'oldData',
            field: 'oldData',
            headerName: 'Old Data',
            flex: 1,
        },
        {
            id: 'newData',
            field: 'newData',
            headerName: 'New Data',
            flex: 1,
        },*/

    ];

    return (
        <div style={{/*height: '58vh',*/ width: '100%'}}>
            <DataGrid
                rows={rows}
                columns={columns}
                columnHeaderHeight={45}
                editMode="row"
                initialState={{
                    pagination: {
                        paginationModel: {page: 0, pageSize: pageSize},
                    },
                }}
                paginationModel={paginationModel}
                onPaginationModelChange={setPaginationModel}
                slots={{
                    noRowsOverlay: () => (
                        CustomNoRowsOverlay()
                    )
                }}
                pageSizeOptions={[15]}
                getRowHeight={() => 'auto'}
                autoHeight
                getRowId={(row) =>  row.recordId+row.tableName + row.modified}
            />
            <ThemeProvider theme={LIONER_FORM_THEME}>
            <AuditLogDetailWindow
                tableName={tableName}
                isWindowOpen={isWindowOpen}
                title={selectedAuditLog == null ? null : selectedAuditLog.recordName}
                record={selectedAuditLog}
                onNormalClose={handleClose}
            />
            </ThemeProvider>
        </div>
    );
}
