// material-ui
import * as React from 'react';
import {
    DataGrid, GridOverlay,
} from "@mui/x-data-grid";
import {FormattedMessage, useIntl} from "react-intl";
import {TablePagination, Typography} from '@mui/material';

// ==============================|| EVENT TABLE ||============================== //

export function FiDataGrid({ rows, columns, sx, autoHeight,
                               hideFooterSelectedRowCount, rowModesModel, editMode,
                               pageSizeOptions, filterItems, ...props }) {
    const intl = useIntl();
    const [_rows, set_rows] = React.useState([]);
    const [_columns, set_columns] = React.useState([]);
    const [_rowModesModel, set_rowModesModel] = React.useState({});
    const [_editMode, set_editMode] = React.useState("row");
    const [_pageSizeOptions, set_pageSizeOptions] = React.useState([10, 25, 50]);
    const [_filterItems, set_filterItems] = React.useState([]);

    const [page, setPage] = React.useState(0);
    const [pageSize, setPageSize] = React.useState(10);
    const [_autoHeight, set_autoHeight] = React.useState(true);
    const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
    const [_sx, set_sx] = React.useState({
        padding: "4 2 4 2",
        '& .MuiDataGrid-cell': {
            borderTop: 1,
            borderBottom: 1,
            borderColor: "#EEE",
        },
        '& .MuiDataGrid-footerContainer': {
            border: 1,
            borderColor: "#EEE"
        },
    });

    React.useEffect(() => {
        if (sx) {
            set_sx(sx);
        }
        if (hideFooterSelectedRowCount) {
            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
        }
        if (rowModesModel) {
            set_rowModesModel(rowModesModel)
        }
        if (rows) {
            set_rows(rows)
        }
        if (columns) {
            set_columns(columns)
        }
        if (pageSizeOptions) {
            set_pageSizeOptions(pageSizeOptions)
        }
        if(autoHeight !== undefined){
            set_autoHeight(autoHeight)
        }
        if(editMode){
            set_editMode(editMode);
        }
        if(filterItems){
            set_filterItems(filterItems);
        }
    }, [sx, hideFooterSelectedRowCount, rowModesModel, rows, columns, pageSizeOptions, autoHeight, editMode, filterItems]);

    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    };

    const handleChangePageSize = (event) => {
        setPageSize(parseInt(event.target.value, 10));
        setPage(0);
    };

    const startIndex = page * pageSize;
    const endIndex = (page + 1) * pageSize;
    const slicedRows = _rows.slice(startIndex, endIndex);

    function CustomNoRowsOverlay() {
        return (
            <GridOverlay>
                <Typography variant="body1">
                    <FormattedMessage id="noRecordFound" />
                </Typography>
            </GridOverlay>
        );
    }

    return (
        <div style={{ height: 400, width: "100%" }}>
            <DataGrid
                {...props}
                rows={slicedRows}
                columns={_columns}
                disableColumnMenu
                rowModesModel={_rowModesModel}
                pageSizeOptions={_pageSizeOptions}
                editMode={_editMode}
                autoHeight={_autoHeight}
                hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
                filterModel={{ items: _filterItems }}
                sx={_sx}
                components={{
                    noRowsOverlay: CustomNoRowsOverlay,
                    Pagination: () => (
                        <TablePagination
                            count={_rows.length}
                            page={page}
                            rowsPerPage={pageSize}
                            rowsPerPageOptions={[10]}
                            labelDisplayedRows={({ from, to, count }) =>
                                `${from}-${to} ${intl.formatMessage({ id: "of" })} ${count}`
                            }
                            labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangePageSize}
                        />
                    ),
                }}
            />
        </div>
    );
}