import * as React from 'react';
import { useState, useEffect } from 'react';
import { useAppDispatch } from 'redux/store';
import { getAll{modelName} } from 'services/{tableName}Service';
import { registerLicense } from '@syncfusion/ej2-base';
registerLicense('Mgo+DSMBaFt/QHRqVVhlXFpHaV5LQmFJfFBmRGlcfFRzcEU3HVdTRHRcQl9iQX5Sc0VhWHdWeXA=;Mgo+DSMBPh8sVXJ0S0J+XE9BdlRBQmJAYVF2R2BJflR1d19FZEwgOX1dQl9gSXxSfkViXH9ccX1VRGQ=;ORg4AjUWIQA/Gnt2VVhkQlFac19JXnxId0x0RWFab196cVZMY1hBNQtUQF1hSn5Rd01jWHpecnVcR2ZV;MTE1MzkzNkAzMjMwMmUzNDJlMzBGTWdkM2pidVlJUk5mdTM3TDcyd3JObitGMEdObjNqT3hVTTN2aUxMWVg0PQ==;MTE1MzkzN0AzMjMwMmUzNDJlMzBtY2FVUzZnbEJSdFpzOHVHWG1ocjlsY1BkZkhINkIvL2VOd1M3dEdHbmdRPQ==;NRAiBiAaIQQuGjN/V0Z+WE9EaFpCVmBWf1ppR2NbfE5xflBFal9VVAciSV9jS31TdERrWX5bcHZUT2ddUg==;MTE1MzkzOUAzMjMwMmUzNDJlMzBneTgxVUV3ZG1MSitWaDJocjQ3am41RVBFWU81ZXJoTmVHOUw0U1dreVBnPQ==;MTE1Mzk0MEAzMjMwMmUzNDJlMzBXa3M3Vm9YZ2wwaXM4L2pnbjlrakVXNFptbi8zQkxhN3JxZHhHWlhFWWFnPQ==;Mgo+DSMBMAY9C3t2VVhkQlFac19JXnxId0x0RWFab196cVZMY1hBNQtUQF1hSn5Rd01jWHpecnZVRGRf;MTE1Mzk0MkAzMjMwMmUzNDJlMzBmNGtXcEN1YnQ1ODFNQjZpZFArV3NCd05HNm5uQXVGa3NhdmphQThITUhRPQ==;MTE1Mzk0M0AzMjMwMmUzNDJlMzBmVTF5Y0VCV2ZheHdlQzN6dVN3K3lUWDF0VURUZzVaUUdubWhYMmJCN3VJPQ==;MTE1Mzk0NEAzMjMwMmUzNDJlMzBneTgxVUV3ZG1MSitWaDJocjQ3am41RVBFWU81ZXJoTmVHOUw0U1dreVBnPQ==');


export const {componentName}: React.FC = () => {
    const dispatch = useAppDispatch();
    const [data, setData] = useState<AxiosResponse>(null);  

    useEffect(() => {
        getAll{modelName}(1, 100).then(
            data => {
                setData(data.data.document.records);
            }
        )
    }, [data])


    const columns = {fetchColumns}

    return (
        <>
            <h1>{modelName}</h1>
            <GridComponent dataSource={data}
                allowPaging={true}
                pageSettings={pageSettings}
                editSettings={editOptions}
                toolbar={toolbarOptions}
                actionComplete={actionComplete}
            >
                <ColumnsDirective>
                    {columns.map((column, index) => (
                        <ColumnDirective key={index} field={column.field} headerText={column.headerText} isPrimaryKey={column.isPrimaryKey} width='150' textAlign='Left' />
                    ))}
                </ColumnsDirective>
                <Inject services={[Page, Edit, Toolbar]} />
            </GridComponent>
        </>
    )
}

// {primaryKeyList} = "backend_stack_id"
// {modelName} = "Backend_Stacks"
// {tableName} = "backend_stacks"
// {componentName} = 'Backend_Stack_grid'
// {fetchColumns} = [all Column Properties] 
i.e. 
[
        {
            field: 'backend_stack_id',
            headerText: 'backend_stack_id',
            isPrimaryKey: true
        },
        {
            field: 'backend_stack_name',
            headerText: 'backend_stack_name'
        },
        {
            field: 'createdAt',
            headerText: 'createdAt',
            type: 'date'
        },
        {
            field: 'createdBy',
            headerText: 'createdBy'
        },
        {
            field: 'isActive',
            headerText: 'isActive'
        },
        {
            field: 'modifiedAt',
            headerText: 'modifiedAt'
        },
        {
            field: 'modifiedBy',
            headerText: 'modifiedBy'
        }
    ];