import React from 'react';
import {Modal, Form, Button} from 'semantic-ui-react';

const ViewTree = ({i18n, open, data, closeView, removeNode}) => {
    let seNode = null;
    let nodeKey = Object.keys(data);
    return (
        <Modal open={open} onClose={()=>{closeView()}} >
            <Modal.Header content="連動群組資料" />
            <Modal.Content>
                <Form as="div">
                    <Form.Group inline>
                        <Form.Field>
                            <label>刪除節點</label>
                            <select ref={node=>seNode=node}>
                                {
                                    nodeKey.map((t,idx)=>(
                                        <option key={idx} value={t}>{data[t].name}</option>
                                    ))
                                }
                            </select>
                        </Form.Field>
                        <Form.Field>
                            <Button type="button" basic size="tiny" content="刪除節點" onClick={()=>{
                                    if(!seNode) return ;
                                    removeNode(seNode.value);
                                }} />
                        </Form.Field>
                    </Form.Group>
                </Form>
                <pre>
                    {
                        JSON.stringify(data, null, 4)
                    }
                </pre>
            </Modal.Content>
        </Modal>
    )
}

export default ViewTree;