const options = [
    {"id": "bluetooth", "name": "Bluetooth", 'class': 'initial'},
    {"id": "gsm", "name": "GSM", 'class': 'initial'},
    {"id": "nfc", "name": "NFC", 'class': 'initial'},
    
    {"id": "low_frequency", "name": "Χαμηλή συχνότητα"},
    {"id": "headphones", "name": "Σύνδεση ακουστικών"},
    {"id": "connect", "name": "Δικτύωση συσκευής με συσκευή"},
    
    {"id": "cellphones", "name": "Κινητή τηλεφωνία"},
    {"id": "4g", "name": "4G / 5G"},
    {"id": "sim", "name": "Κάρτα SIM"},
    
    {"id": "near", "name": "Κοντινή απόσταση, μικρότερη των 4 εκατοστών"},
    {"id": "contactless", "name": "Τεχνολογία ανέπαφων συναλλαγών"},
    {"id": "radio", "name": "Ραδιοσυχνότητες"},
    {"id": "cards", "name": "Χρεωστικές κάρτες πληρωμών"},

];

const connections = [
    ["bluetooth", "low_frequency"],
    ["bluetooth", "headphones"],
    ["bluetooth", "connect"],

    ["gsm", "cellphones"],
    ["gsm", "4g"],
    ["gsm", "sim"],

    ["nfc", "near"],
    ["nfc", "contactless"],
    ["nfc", "radio"],
    ["nfc", "cards"],
];

var connectionsMade = [];

window.addEventListener('load', function(){
    const windowWidth = window.innerWidth;
    const containerWidth = 200;
    const itemsPerRow = Math.floor(windowWidth / containerWidth);
    const canvas = document.querySelector('#canvas');
    let shuffledOptions = JSON.parse(JSON.stringify(options));
    shuffle(shuffledOptions);
    for (let i = 0; i < shuffledOptions.length; i++) {
        const div = document.createElement('DIV');
        div.classList.add('window');

        if(typeof shuffledOptions[i].class != 'undefined')
            div.classList.add(shuffledOptions[i].class);

        div.id = shuffledOptions[i].id;
        div.appendChild(document.createTextNode(shuffledOptions[i].name));
        div.style.left = `${i % itemsPerRow * containerWidth}px`
        div.style.top = `${Math.floor(i / itemsPerRow) * containerWidth}px`
        canvas.appendChild(div);
    }
    load();
});

function shuffle(array) {
    let currentIndex = array.length;
  
    // While there remain elements to shuffle...
    while (currentIndex != 0) {
  
      // Pick a remaining element...
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  }

function load() {



    jsPlumb.ready(() => {
        const instance = jsPlumb.newInstance(
            {
                container: document.querySelector('.jtk-demo-canvas'),
                dragOptions: { cursor: 'pointer', zIndex: 2000 },
                // paintStyle: { stroke: '#666' },
                // paintStyle: {  fill:"red", outlineStroke:"black", outlineWidth:1  },
                sourceEndpointStyle: { fillStyle: '#808000' },

                connectorStyle:{lineWidth:4,strokeStyle:"#567F9F",joinstyle:"round",outlineColor:"white",outlineWidth:2},

                
                endpointHoverStyle: { fill: "orange" },
                hoverPaintStyle: { stroke: "orange" },
                endpoint: "Rectangle",
                // ConnectionsDetachable:false,
                // anchors: ["TopCenter", "TopCenter"],
                container: canvas,
                dropOptions:{activeClass:"dragActive", hoverClass:"dropHover"},
                connectionOverlays:[
                    {
                        type:"Arrow",
                        options:{location:1}
                    }
                ]
            }
        );



        // suspend drawing and initialise.
        instance.batch(function () {

            // configure some drop options for use by all endpoints.
            var exampleDropOptions = {
                tolerance: "touch",
                hoverClass: "dropHover",
                activeClass: "dragActive"
            };

            var color = "#1aa8ad";
            var mainEndpoint = {
                endpoint: "Rectangle",
                paintStyle: { width: 25, height: 21, fill: color },
                source: true,
                reattach: false,
                scope: "blue",
                connector: {type:"Bezier"},
                connectorStyle: {
                    strokeWidth: 5,
                    stroke: color,
                    dashstyle: "2 2"
                },
                maxConnections: 10,
                target: false,
                dropOptions: exampleDropOptions
            };
           
            const items = document.querySelectorAll('.window');
            for (let i = 0; i < items.length; i++)
            {
                instance.addEndpoint(items[i], { anchor: [1, 0.2, 1, 0] }, mainEndpoint);
            }

            //set targets
            instance.addTargetSelector(".window", {
                anchor:"Continuous",
            })

            instance.bind('beforeDrop', function(ci){ // Before new connection is created
                console.log(ci);

                found = false;
                let connectionToBeMade = [];
                for (let i = 0; i < connections.length; i++)
                {
                    if(connections[i].includes(ci.sourceId) && connections[i].includes(ci.targetId) && ci.sourceId != ci.targetId)
                    {
                        found = true;
                        connectionToBeMade = connections[i];
                        break;
                    }
                }

                console.log(found);
                //stop here
                if(!found)
                    return false;

                for (let i = 0; i < connectionsMade.length; i++)
                {
                    if(connectionsMade[i].includes(ci.sourceId) && connectionsMade[i].includes(ci.targetId))
                    {
                        found = false;
                        break;
                    }
                }

                if(!found)
                    return false;

                connectionsMade.push(connectionToBeMade);

                
                var color = "#1aa8ad";
                const el1 = document.querySelector(`#${ci.sourceId}`)
                const el2 = document.querySelector(`#${ci.targetId}`)

                let connection = instance.connect({
                    source: el1,
                    target: el2,
                    anchors:["Continuous", "Continuous"],
                    paintStyle:{ stroke:color, strokeWidth:5, dashstyle: "2 2" },
                    connector: {type:"Bezier"},
                    endpointStyle:{ fill: "#1aa8ad", outlineStroke:"ccc", outlineWidth:1 },
                    detachable:false
                })

                return false; 
            });




        });
    });

};
