import React from 'react';
import ReactDOM from 'react-dom';
import SplitPane from 'react-split-pane';
import renderjson from 'renderjson';

import TaskEditor from './TaskEditor.js'

import 'bulma/css/bulma.css';
import './index.css';

global.context = {};

//let defaultPORT = 4000;
let defaultPORT = window.location.port;
let defaultURL = "ws://" + window.location.hostname + ":" + defaultPORT + "/ws";

global.context.ws = new global.org.mwg.plugin.WSClient(defaultURL);
global.context.graph = global.org.mwg.GraphBuilder.newBuilder().withStorage(global.context.ws).build();
global.context.actions = [];
global.context.graph.connect(null);

global.context.url = function (val) {
    if (global.context.graph !== undefined) {
        global.context.graph.disconnect(null);
    }
    global.context.ws = new global.org.mwg.plugin.WSClient(val);
    global.context.graph = global.org.mwg.GraphBuilder.newBuilder().withStorage(global.context.ws).build();
    global.context.graph.connect(null);
    console.log('change url to ' + val);
};

fetch("http://"+window.location.hostname+":"+defaultPORT+"/actionregistry/").then(function (response) {
    return response.json().then(function (actions) {
        global.context.actions = actions;
    });
});

renderjson.set_show_to_level(3);

const LoadingButton = React.createClass({
    getInitialState() {
        return {
            isLoading: false
        };
    },
    render() {
        let isLoading = this.state.isLoading;
        return (
            <button className={isLoading ? 'button is-primary is-loading' : 'button is-primary'}
                    onClick={!isLoading ? this.handleClick : null}>
                {isLoading ? '' : 'Execute'}
            </button>
        );
    },
    handleClick() {
        let self = this;
        self.setState({isLoading: true});
        let task = global.org.mwg.task.Tasks.newTask();
        try {
            task.parse(global.context.code, window.context.graph);
            global.context.ws.executeTasks(function (results) {
                let targetDomElem = document.getElementById("json_result");
                while (targetDomElem.firstChild) {
                    targetDomElem.removeChild(targetDomElem.firstChild);
                }
                targetDomElem.appendChild(
                    renderjson(JSON.parse(results[0]))
                );
                self.setState({isLoading: false});
            }, task);
        } catch (e) {
            let targetDomElem = document.getElementById("json_result");
            while (targetDomElem.firstChild) {
                targetDomElem.removeChild(targetDomElem.firstChild);
            }
            targetDomElem.appendChild(
                renderjson({message: e.message})
            );
            self.setState({isLoading: false});
        }
    }
});

ReactDOM.render(
    <SplitPane split="horizontal" defaultSize={47} allowResize={false}>
        <div className="message-header is-primary flex">
            <p className="control is-horizontal has-addons">
                <input className="input" defaultValue={defaultURL} type="text" placeholder="IP:PORT"
                       onChange={event => global.context.url(event.target.value)}/>
                <LoadingButton />
            </p>

        </div>
        <SplitPane split="vertical" defaultSize="40%" minSize={50} onChange={size => global.context.layout()}>
            <TaskEditor />
            <SplitPane split="horizontal" defaultSize="80%" allowResize={true}>
                <div id="json_result"></div>
                <div id="output_error_result"></div>
            </SplitPane>
        </SplitPane>
    </SplitPane>
    ,
    document.getElementById("root")
);


@@ -1047,17 +1047,19 @@
 http://%22
-+
+ + 
 window.l
@@ -1078,13 +1078,17 @@
 name
-+%22:%22+
+ + %22:%22 + 
 defa
@@ -1094,17 +1094,19 @@
 aultPORT
-+
+ + 
 %22/action
@@ -2242,32 +2242,379 @@
               %7D%0A
+                let outputDomElem = document.getElementById(%22output_error_result%22);%0A                while (outputDomElem.firstChild) %7B%0A                    outputDomElem.removeChild(outputDomElem.firstChild);%0A                %7D%0A                let JSON_RESULT = JSON.parse(results%5B0%5D);%0A                if (JSON_RESULT%5B'result'%5D !== undefined) %7B%0A    
                 
@@ -2652,32 +2652,36 @@
                 
+    
 renderjson(JSON.
@@ -2683,46 +2683,665 @@
 JSON
-.parse(results%5B0%5D))%0A                );
+_RESULT%5B'result'%5D)%0A                    );%0A                %7D%0A                if (JSON_RESULT%5B'error'%5D !== undefined) %7B%0A                    let contentNode = document.createElement(%22div%22);%0A                    contentNode.style.color = 'red';%0A                    contentNode.innerText = JSON_RESULT%5B'error'%5D;%0A                    outputDomElem.appendChild(contentNode);%0A                %7D%0A                if (JSON_RESULT%5B'output'%5D !== undefined) %7B%0A                    let contentNode = document.createElement(%22span%22);%0A                    contentNode.innerText = JSON_RESULT%5B'output'%5D;%0A                    outputDomElem.appendChild(contentNode);%0A                %7D
 %0A   

improve TaskIDE to report correctly output and errors