// material-ui
import * as React from 'react';
import { GridActionsCellItem, } from "@mui/x-data-grid";
import { FiDataGrid } from "components/FiDataGrid";
import EditIcon from '@mui/icons-material/Edit';
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

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

export default function EmailTemplateTable({ recordList }) {
    const [rows, setRows] = React.useState(recordList);

    const navigate = useNavigate()

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

    const handleEditClick = (id) => () => {
        navigate('/emailTemplate/' + id);
    };

    const columns = [
        {
            field: 'actions',
            type: 'actions',
            headerName: 'Actions',
            width: 100,
            cellClassName: 'actions',
            getActions: ({ id }) => {
                return [
                    <GridActionsCellItem
                        key="OutSave"
                        icon={<EditIcon />}
                        label="Edit"
                        className="textPrimary"
                        onClick={handleEditClick(id)}
                        color="primary"
                    />]
            },
        },
        {
            id: 'tempKey',
            field: 'tempKey',
            headerName: 'Key',
            flex: 1,
        },
        {
            id: 'description',
            field: 'description',
            headerName: 'Description',
            flex: 1,
        },
        {
            id: 'params',
            field: 'params',
            headerName: 'Params',
            flex: 1,
        },
        {
            id: 'subjectCht',
            field: 'subjectCht',
            headerName: 'SubjectCht',
            flex: 1,
        },
        {
            id: 'subjectChs',
            field: 'subjectChs',
            headerName: 'SubjectChs',
            flex: 1,
        },
        {
            id: 'subjectEng',
            field: 'subjectEng',
            headerName: 'SubjectEng',
            flex: 1,
        },
    ];

    function handleRowDoubleClick(params) {
        navigate('/emailTemplate/' + params.id);
    }

    return (
        <div style={{ height: "fit-content", width: '100%' }}>
            <FiDataGrid
                rows={rows}
                columns={columns}
                customPageSize={5}
                onRowDoubleClick={handleRowDoubleClick}
                getRowHeight={() => 'auto'}
            />
        </div>
    );
}