// material-ui
import * as React from 'react';
import {
    DataGrid,
    // GridActionsCellItem,
    // GridRowModes
} from "@mui/x-data-grid";
// import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
import { useEffect } from "react";
// import {useNavigate} from "react-router-dom";
// import { useTheme } from '@mui/material/styles';
import {
    Box,
    Stack,
    Typography
} from '@mui/material';
import {FormattedMessage, useIntl} from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

export default function PreviewUploadFileTable({ recordList, }) {

    const [rows, setRows] = React.useState(recordList);
    const [rowModesModel] = React.useState({});
    // const theme = useTheme();

    const intl = useIntl();

    // const navigate = useNavigate()

    useEffect(() => {
        setRows(recordList);
    }, [recordList]);

    function NoRowsOverlay() {
        return (
            <Stack height="100%" alignItems="center" justifyContent="center">
                <Typography variant="h6">
                    <FormattedMessage id="noFile"/>
                </Typography>
                {/* <pre>(rows=&#123;[]&#125;)</pre> */}
            </Stack>
        );
    }

    // const handleCancelClick = (id) => () => {
    //     setRowModesModel({
    //         ...rowModesModel,
    //         [id]: { mode: GridRowModes.View, ignoreModifications: true },
    //     });
    //     console.log("Starting Delete")
    //     const editedRow = rows.find((row) => row.id === id);
    //     console.log(editedRow)
    //     console.log(editedRow.isNew)
    //     setUpdateRows(rows.filter((row) => row.id !== id));
    //     setRows(rows.filter((row) => row.id !== id));
    // }

    const columns = [
        // {
        //     field: 'actions',
        //     type: 'actions',
        //     headerName: '',
        //     width: 30,
        //     cellClassName: 'actions',
        //     getActions: ({id}) => {
        //         return [
        //             <GridActionsCellItem
        //                 key="OutSave"
        //                 icon={<RemoveCircleOutlineIcon/>}
        //                 label="delete"
        //                 className="textPrimary"
        //                 onClick={handleCancelClick(id)}
        //                 color="error"
        //             />]
        //     },
        // },
        {
            id: 'name',
            field: 'name',
            headerName: intl.formatMessage({ id: 'fileName' }),
            flex: 1,
        },
        {
            id: 'size',
            field: 'size',
            headerName: intl.formatMessage({ id: 'fileSize' }),
            valueGetter: (params) => {
                // console.log(params)
                return Math.ceil(params.value / 1024) + " KB";
            },
            flex: 1,
        },
    ];

    return (
        <Box style={{ height: '200px', width: '100%' }}>
            <DataGrid
                rows={rows}
                columns={columns}
                editMode="row"
                sx={{ border: 1 }}
                rowModesModel={rowModesModel}
                disablePagination
                components={{ NoRowsOverlay, }}
                // hideFooterPagination={true}
                disableSelectionOnClick
                disableColumnMenu
                disableColumnSelector
                hideFooter
                getRowHeight={()=>"auto"}
            />
        </Box>
    );
}
