import React, { useState } from 'react';
import { Button, Modal, Flex, Typography, Divider } from 'antd';
import PathUpsert from '../upsert';
import PathDetail from '../detail';
const { Title } = Typography;
export default function render(props) {
    const { paths, oakPagination, oakFullpath, allowCreate, actions, entity } = props.data;
    const { t, execute, addItem, clean, onConfirmed } = props.methods;
    if (oakFullpath) {
        const [upsertId, setUpsertId] = useState('');
        const isCreate = upsertId && paths.find(ele => ele.id === upsertId)?.$$createAt$$ === 1;
        return (<>
                <Flex vertical align="stretch">
                    <Flex justify="space-between" align="center">
                        <Title>{entity}</Title>
                        <Flex align="center">
                            <Button type="primary" onClick={() => {
                const id = addItem({});
                setUpsertId(id);
            }}>
                                {t('common::action.add')}
                            </Button>
                        </Flex>
                    </Flex>
                    {paths?.map((ele) => {
                return <div key={`path${ele?.id}`}>
                                <Divider />
                                <PathDetail oakPath={`${oakFullpath}.${ele?.id}`} 
                // relations={relations}
                actions={actions}/>
                            </div>;
            })}
                </Flex>
                <Modal destroyOnClose={true} open={!!upsertId} title={t('addPath')} onCancel={() => {
                clean();
                setUpsertId('');
            }} closeIcon={null} footer={null}>
                    <PathUpsert oakPath={`${oakFullpath}.${upsertId}`} entity={entity} onConfirmed={async () => {
                await onConfirmed();
                setUpsertId('');
            }}/>
                </Modal>
            </>);
    }
    return null;
}