import React from 'react';
import { Checkbox, Table } from 'antd';
export default function render(props) {
    const { oakFullpath, destRelations, sourceRelations, rowData, pathId, relationAuthList } = props.data;
    const { t, execute, addItem, clean, navigateTo, removeItem, updateItem } = props.methods;
    const updateRow = async (checked, record, dataIndex) => {
        let data = {};
        const destRelationId = destRelations.find((ele) => ele.name === dataIndex).id;
        if (checked) {
            data = {
                pathId,
                destRelationId,
                sourceRelationId: record.relationId,
            };
            addItem(data);
        }
        else {
            const removeRow = relationAuthList.find((ele) => ele.destRelationId === destRelationId && ele.sourceRelationId === record.relationId);
            removeItem(removeRow.id);
        }
        await execute();
    };
    if (sourceRelations?.length > 0 && destRelations?.length > 0 && rowData?.length > 0) {
        const EditableCell = ({ record, dataIndex }) => {
            if (dataIndex === 'relationName') {
                return <td>
                    <div style={{ paddingInlineEnd: 24 }}>
                        {record?.relationName}
                    </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 destRelations) {
            columns.push({
                title: ele.name,
                dataIndex: ele.name,
                editable: true,
                onCell: (record) => ({
                    record,
                    editable: true,
                    dataIndex: ele.name,
                    title: ele.name,
                })
            });
        }
        const components = {
            body: {
                cell: EditableCell,
            },
        };
        return (<Table components={components} 
        // rowClassName="editable-row"
        bordered dataSource={rowData} columns={columns} pagination={false}/>);
    }
    return null;
}