// 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 {
    Stack, useMediaQuery
} from '@mui/material';
import {useTheme} from "@emotion/react";
import {useIntl} from "react-intl";
// ==============================|| EVENT TABLE ||============================== //

export default function UploadFileTable({recordList, setRecordList,}) {
    
    const [rows, setRows] = React.useState(recordList);
    const [rowModesModel,setRowModesModel] = React.useState({});
    const theme = useTheme();
    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
    const intl = useIntl();
    // const theme = useTheme();

    // const navigate = useNavigate()

    useEffect(() => {
        setRows(recordList);
        // console.log(disableDelete);
    }, [recordList]);

    function NoRowsOverlay() {
        return (
            <Stack height="100%" alignItems="center" justifyContent="center">
            No File Record
            {/* <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)
        setRecordList(rows.filter((row) => row.id !== id));
        setRows(rows.filter((row) => row.id !== id));
    }

    const columns = [
        {
            field: 'actions',
            type: 'actions',
            headerName: '',
            width: 30,
            cellClassName: 'actions',
            // hide:true,
            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'}),
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
        },
        {
            id: 'size',
            field: 'size',
            headerName: intl.formatMessage({id: 'fileSize'}),
            valueGetter: (params) => {
                // console.log(params)
                return Math.ceil(params.value/1024)+" KB";
              },
            width: isMdOrLg ? 'auto' : 160,
            flex: isMdOrLg ? 1 : undefined,
        },
    ];

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