import React from 'react';
import { Checkbox, Table } from 'antd';
export default function render(props) {
    const { oakFullpath, actions, relations, rowData, pathId } = props.data;
    const { t, execute, addItem, clean, navigateTo, removeItem, updateItem } = props.methods;
    const updateRow = async (checked, record, dataIndex) => {
        let data = {};
        if (checked) {
            if (record.id) {
                const newDeActions = [...(record.deActions || [])];
                newDeActions.push(dataIndex);
                data = {
                    deActions: newDeActions
                };
                updateItem(data, record.id);
            }
            else {
                data = {
                    pathId,
                    deActions: [dataIndex],
                    relationId: record.relationId
                };
                addItem(data);
            }
        }
        else {
            if (record.deActions && record.deActions.length > 1) {
                const newDeActions = record.deActions.filter((ele) => ele !== dataIndex);
                data = {
                    deActions: newDeActions
                },
                    updateItem(data, record.id);
            }
            else {
                removeItem(record.id);
            }
        }
        await execute();
    };
    if (actions?.length > 0 && rowData?.length > 0) {
        const EditableCell = ({ record, dataIndex }) => {
            if (dataIndex === 'relationName') {
                return <td>
                    <div style={{ paddingInlineEnd: 24 }}>
                        {record?.relationName || 'user'}
                    </div>
                </td>;
            }
            return <td>
                <div style={{ paddingInlineEnd: 24 }}>
                    <Checkbox checked={record[dataIndex]} onChange={async (e) => {
                    await updateRow(e.target.checked, record, dataIndex);
                }}/>
                </div>
            </td>;
        };
        const columns = [{
                title: '',
                dataIndex: 'relationName',
                editable: false,
                onCell: (record) => ({
                    record,
                    editable: false,
                    dataIndex: 'relationName',
                    title: '',
                })
            }];
        for (const ele of actions) {
            columns.push({
                title: ele,
                dataIndex: ele,
                editable: true,
                onCell: (record) => ({
                    record,
                    editable: true,
                    dataIndex: ele,
                    title: ele,
                })
            });
        }
        const components = {
            body: {
                cell: EditableCell,
            },
        };
        return (<Table components={components} 
        // rowClassName="editable-row"
        bordered dataSource={rowData} columns={columns} pagination={false}/>);
    }
    return null;
}