import * as React from 'react';
import Layout from '../../resources/ui/layout/layout';
import * as vis from '../../resources/visjs/vis';

export interface TestComponentProps {

}

export interface TestComponentState {

}

const mainStyle = {
    minHeight: '90vh',
}

const sidebarStyle = {
    padding: '10px',
    background: "primary"
}

const contentStyle = {
    padding: '10px',
}

class TestComponent extends React.Component<TestComponentProps, TestComponentState> {

    network: any;

    constructor(props) {
        super(props);
    }

    render() {
        const template: {
            groupName: string,
            items: {
                label: string,
                keywords: string,
                item: string,
                id: string | number,
            }[]
        }[] = [
                {
                    groupName: 'GRP 1',
                    items: [
                        {
                            item: 'hello',
                            keywords: '1',
                            label: 'Hello',
                            id: 1,
                        },
                        {
                            item: 'world',
                            keywords: '2',
                            label: 'world',
                            id: 2,

                        }, {
                            item: '!',
                            keywords: '3',
                            label: '!',
                            id: 3,
                        }

                    ]
                },
                {
                    groupName: 'GRP 2',
                    items: [
                        {
                            item: 'world',
                            keywords: '4',
                            label: 'world',
                            id: 4,
                        }
                    ]
                }
            ];

        const items = [
            {
                item: 'hello',
                keywords: '1',
                label: 'Hello',
                id: 1,
                color: 'primary'
            },
            {
                item: 'world',
                keywords: '2',
                label: 'danger',
                id: 2,
                color: 'danger'

            }, {
                item: '!',
                keywords: '3',
                label: '!',
                id: 3,
            }
        ] as any;

        return (
            <>
                <Layout
                    selection={items}
                    onMount={ref => {
                        const data = { "edges": [{ "id": "event_000", "from": "state_000", "to": "state_001", "label": "Human Leaves", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_001", "from": "state_000", "to": "state_002", "label": "Stop (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_002", "from": "state_001", "to": "state_000", "label": "Human enters", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_003", "from": "state_001", "to": "state_002", "label": "Stop (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_004", "from": "state_001", "to": "state_003", "label": "Target Reached", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_005", "from": "state_003", "to": "state_002", "label": "Stop (3)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_006", "from": "state_002", "to": "state_001", "label": "Move Axis to Target Position", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_007", "from": "state_002", "to": "state_004", "label": "TE ausschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_008", "from": "state_004", "to": "state_005", "label": "Synchronize Axis (2)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_009", "from": "state_004", "to": "state_002", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_010", "from": "state_004", "to": "state_006", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_011", "from": "state_005", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_012", "from": "state_005", "to": "state_008", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_013", "from": "state_005", "to": "state_006", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_014", "from": "state_005", "to": "state_009", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_015", "from": "state_007", "to": "state_004", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_016", "from": "state_007", "to": "state_005", "label": "Synchronize Axis (1)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_017", "from": "state_007", "to": "state_010", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_018", "from": "state_007", "to": "state_011", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_019", "from": "state_010", "to": "state_002", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_020", "from": "state_011", "to": "state_006", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_021", "from": "state_011", "to": "state_012", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_022", "from": "state_011", "to": "state_007", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_023", "from": "state_012", "to": "state_013", "label": "Stop (4)", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_024", "from": "state_012", "to": "state_010", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_025", "from": "state_013", "to": "state_002", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_026", "from": "state_008", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_027", "from": "state_008", "to": "state_013", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_028", "from": "state_008", "to": "state_014", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_029", "from": "state_014", "to": "state_010", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_030", "from": "state_014", "to": "state_002", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_031", "from": "state_009", "to": "state_007", "label": "Synchronization Lost", "color": { "color": "gray", "inherit": "none" }, "dashes": true }, { "id": "event_032", "from": "state_009", "to": "state_014", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_033", "from": "state_009", "to": "state_004", "label": "Unsynchronize Axis", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_034", "from": "state_009", "to": "state_005", "label": "Zylinder ausfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_035", "from": "state_006", "to": "state_013", "label": "TE einschwenken", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }, { "id": "event_036", "from": "state_006", "to": "state_004", "label": "Zylinder einfahren", "color": { "color": "gray", "inherit": "none" }, "dashes": false, "title": "Triggered Action" }], "nodes": [{ "id": "state_000", "label": "Axis is stopped (2)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 0 }, { "id": "state_001", "label": "Axis is moving to Target\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_002", "label": "Axis is stopped (1)\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 1 }, { "id": "state_003", "label": "Axis at Target Position\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_004", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 2 }, { "id": "state_005", "label": "Arbeitsposition\nAxis is moving sync\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_006", "label": "Arbeitsposition\nAxis is stopped (1)\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 3 }, { "id": "state_007", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_008", "label": "Axis is moving sync\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_009", "label": "Arbeitsposition\nAxis is moving sync\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 4 }, { "id": "state_010", "label": "Axis is moving unsync.\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_011", "label": "Arbeitsposition\nAxis is moving unsync.\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 5 }, { "id": "state_012", "label": "Axis is moving unsync.\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 6 }, { "id": "state_013", "label": "Axis is stopped (1)\nTransportposition\nZylinder ausgefahren", "shape": "box", "color": "yellow", "level": 7 }, { "id": "state_014", "label": "Axis is moving sync\nTransportposition\nZylinder eingefahren", "shape": "box", "color": "yellow", "level": 5 }] }
                        const options = {
                            physics: { enabled: true },
                            layout: {
                                hierarchical: {
                                    enabled: true,
                                    levelSeparation: 300,
                                    nodeSpacing: 300,
                                    treeSpacing: 500,
                                    blockShifting: false,
                                    edgeMinimization: false,
                                    parentCentralization: false,
                                    direction: 'UD',        // UD, DU, LR, RL
                                    sortMethod: 'directed'   // hubsize, directed
                                }
                            },
                            nodes: {
                                font: {
                                    multi: 'md'
                                }
                            },
                            edges: {
                                arrows: 'to',
                                smooth: true,
                                shadow: false,
                                font: {
                                    background: 'white'
                                }
                            },
                            autoResize: false,
                            height: ref.current.parentElement.offsetHeight.toString() + 'px'
                        }
                        this.network = new vis.Network(ref.current, data, options);
                        this.network.on('click', e => console.log(e))
                    }
                    } onResize={() => {
                        if (this.network) {
                            this.network.setSize(undefined, undefined);
                            this.network.redraw();
                        }
                    }
                    }

                    tabs={{
                        active: 'home',
                        items: [{
                            id: 'home',
                            label: 'Main',
                            delteable: false
                        }]
                    }}

                    onNewTab={() => {
                        console.log('NEW TAB REQUESTED'); return {
                            id: Date.now().toString(),
                            label: Date.now().toString(),
                            delteable: true
                        }
                    }}
                ></Layout>
            </>
        )
    }
}

export default TestComponent;