// 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";
import {GET_EMAIL_LIST} from "utils/ApiPathConst";


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

export default function EmailTemplateTable({ responseData }) {
    const [_responseData, set_responseData] = React.useState(responseData);

    const navigate = useNavigate()

    useEffect(() => {
        set_responseData(responseData);
    }, [responseData]);

    const handleEditClick = (id) => () => {
        navigate('/setting/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,
            minWidth: 250,
        },
        {
            id: 'description',
            field: 'description',
            headerName: 'Description',
            flex: 1,
            minWidth: 350,
        },
        {
            id: 'params',
            field: 'params',
            headerName: 'Parameters',
            flex: 1,
            minWidth: 250,
        },
        {
            id: 'subjectCht',
            field: 'subjectCht',
            headerName: 'Subject (Cht)',
            flex: 1,
            minWidth: 400,
        },
        {
            id: 'subjectChs',
            field: 'subjectChs',
            headerName: 'Subject (Chs)',
            flex: 1,
            minWidth: 350,
        },
        {
            id: 'subjectEng',
            field: 'subjectEng',
            headerName: 'Subject (Eng)',
            flex: 1,
            minWidth: 350,
        },
    ];

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

    return (
        <div style={{ height: "fit-content", width: '100%' }}>
            <FiDataGrid
                columns={columns}
                customPageSize={10}
                onRowDoubleClick={handleRowDoubleClick}
                getRowHeight={() => 'auto'}
                // doLoad={{
                //     url:GET_EMAIL_LIST,
                //     params: _responseData
                // }}
                doLoad={React.useMemo(() => ({
                    url: GET_EMAIL_LIST,
                    params: _responseData,
                }), [_responseData])}
            />
        </div>
    );
}