window.addEventListener('load', initMatchings);

var actMatching = null;
var actBase = null;
var actVariant = null;
var actVariants = [];
var actBonds = [];


function initMatchings() {
    var ms = document.querySelectorAll(".matching_m");
   
    for (var i = 0; i < ms.length; i++) {
        var actM = ms[i];
        if (actM.hasAttribute("data-ready")) continue;
        
        var canvas = actM.insertBefore(document.createElement("canvas"), actM.firstChild);
        var mbox = actM.getBoundingClientRect();
        canvas.width = Math.round(mbox.width) //+ "px";
        canvas.height = Math.round(mbox.height) //+ "px";        
        
        actBonds = [];
        

        var mblis = actM.querySelectorAll(".base li");

        for (var j = 0, bcount = mblis.length; j < bcount; j++) {
            var mbli = mblis[j];
            mbli.setAttribute("data-index", j);
            mbli.setAttribute("data-bonds", "");
            mbli.onclick = function () { toggleBaseTerm(this);  };
        }
        
        var list1 = mblis[0].parentNode;
        if (list1.classList.contains("shuffle")) {
          shuffleList(list1);  
        }
                
        
        var mvlis = actM.querySelectorAll(".variants li");
        for (var j = 0, bcount = mvlis.length; j < bcount; j++) {
            var mvli = mvlis[j];
            mvli.setAttribute("data-index", j)
            mvli.onclick = function () { toggleVariant(this);  };
            
            
        }
        
        var list2 = mvlis[0].parentNode;
        
        if (list2.classList.contains("shuffle")) {
            
          shuffleList(list2);  
        }
        
     
       actM.setAttribute("data-ready", "true")
       
       actBase = null;
    }
    
   
}

function shuffleList(list) {
    var items = list.querySelectorAll ("li");
    if (items.length == 0) return;

    for (var j = 0; j < items.length; j++) {
        var rnd = Math.floor(items.length*Math.random());
        list.appendChild(items[rnd])
    } 
}


function toggleBaseTerm(li) {
    var matching = li.parentNode.parentNode;
       
    if (!actMatching) {
      actMatching = matching;
    }
    
    else {
      if (matching != actMatching) {
         if (actBase) {
          actBase.classList.remove("actual");
             updateActualBonds();
          actBase = null;
          
         
        }
        actMatching = matching;
        
        
      }
    }
    
    if (!actBase) {
        actBase = li;
        actBase.classList.add("actual");
        parseActBonds();
        redrawBonds()
        return; 
    }
    
    if (actBase && actBase == li) {
        actBase.classList.remove("actual");
        actBase = null;
        redrawBonds();
        
        /*
        
        actBonds = [];
        */
        return;
    }
    
    if (actBase && actBase != li) {
        actBase.classList.remove("actual");
        updateActualBonds();
        
        //deactualizeList(".variants");
        
        actBase = li;
        actBase.classList.add("actual");
        //actBonds = []
        //var bonds = actBase.getAttribute("data-bonds");
        parseActBonds()
        redrawBonds()
        return;
    }
    
}
function parseActBonds() {
    
    actBonds = parseBondsOfItem(actBase);    
    console.log("Parsed bonds: " + actBonds);
}

function parseBondsOfItem(item) {
    var bonds2 = [];
    var list= item.getAttribute("data-bonds");
    if (list.length > 0) {
        var bonds = list.split("|");
        for (var i = 0; i < bonds.length; i++) {
            var index = parseInt(bonds[i], 10);
            if (!isNaN(index)) {
                bonds2.push(index);
            }

        }
    }
    
    return bonds2;
}

function updateActualBonds() {
    actBonds.sort();
    actBase.setAttribute("data-bonds", actBonds.join("|"));
    redrawBonds();
    
    console.log("Updated bonds: " + actBonds);
}


function toggleVariant(li) {
    var matching = li.parentNode.parentNode;
       
    if (!actMatching) {
      actMatching = matching;
    }
    
    else {
      if (matching != actMatching) {
         if (actBase) {
          actBase.classList.remove("actual");
             updateActualBonds();
          actBase = null;
         
        }
        actMatching = matching;
        //parseMatching(matching);
       
      }
    }

    if (!actBase) return; //neni vybrany zakladni pojem, koncime
    
   
    var vIndex = parseInt(li.getAttribute("data-index"),10);
    
    var bIndex = actBonds.indexOf(vIndex)
    if (bIndex > -1) {
        //actBonds = 
         actBonds.splice(bIndex,1)
        
    }
    else {
        actBonds.push(vIndex);
    }
    updateActualBonds();
  
}




function redrawBonds() {
   var matching = actMatching;
   if (!matching) return;
    var canvas = matching.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.fillStyle="white";
    ctx.fillRect(0,0,9999,9999);
    
    var blis = matching.querySelectorAll(".base li");
    var vlis = matching.querySelectorAll(".variants li")
    
    deactualizeList(".variants");
         
    var mbox = matching.getBoundingClientRect();
    for (var i = 0; i < blis.length; i++) {
        var bonds = blis[i].getAttribute("data-bonds").split("|");
        console.log("Bonds " + bonds)
        for (var j = 0; j < bonds.length; j++) {
            var vIndex = parseInt(bonds[j], 10);
            var actVariant = matching.querySelector(".variants [data-index='" + vIndex+ "']");
            if (!actVariant) continue;
            
           var bbox = blis[i].getBoundingClientRect();
           var vbox = actVariant.getBoundingClientRect();
            ctx.beginPath() ;
            ctx.lineWidth = 1;
            ctx.strokeStyle = "#444";
            if (actBase && blis[i] == actBase) {
                ctx.lineWidth=3;
                ctx.strokeStyle = "#000"
                actVariant.classList.add("actual");
            }
            ctx.moveTo(bbox.left - mbox.left + bbox.width, bbox.top - mbox.top  + bbox.height/2 );
            ctx.lineTo(vbox.left - mbox.left, vbox.top - mbox.top + vbox.height/2 );
            ctx.stroke();
           
        }
    }
    
}

function checkMatching(btn) {
    
    matching = btn.parentNode.parentNode;
    
    var solution = matching.getAttribute("data-sol").split("|");
    for (var i = 0; i < solution.length; i++) {
        var parts = solution[i].split(/\s*,\s*/g);
        solution[i] = []
        for (var j = 0; j < parts.length; j++) {
            solution[i].push(parseInt(parts[j], 10));
        }
    }
    
    var canvas = matching.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    
    ctx.fillStyle="white";
    ctx.fillRect(0,0,9999,9999);
    
    deactualizeList(".variants");
    deactualizeList(".base");
    actBase = null;
    
    var blis = matching.querySelectorAll(".base li");
    var vlis = matching.querySelectorAll(".variants li");
    
    for (var i = 0; i < vlis.length; i++) {
        vlis[i].classList.remove("actual");
    }
        
    actBonds = [];
    
    
    for (var i = 0; i < blis.length; i++) {
        
        var itemBase = matching.querySelector(".base [data-index='" + (i) +"']");
        
        var bonds = parseBondsOfItem(itemBase);
        console.log("Checked bonds: " + bonds);
                
        for (var j = 0; j < vlis.length; j++) {
                    
            var iSol = solution[i].indexOf(j);
            var iGiven = bonds.indexOf(j);
            
            var itemVar = matching.querySelector(".variants [data-index='" + (j) +"']");
            
            if (iSol > -1 && iGiven > -1) { //spravne spojeni
                drawLine(ctx, itemBase, itemVar, 3, "#0c0");
            }
            
            if (iSol == -1 && iGiven > -1) { // spatne spojeni
                drawLine(ctx, itemBase, itemVar, 3, "#f00");
            }
            if (iSol > -1 && iGiven == -1) { //nedodelane spravne spojeni
                drawLine(ctx, itemBase, itemVar, 3, "#fa0");
            }
           
        }
    }
    
}

function drawLine(ctx, item1, item2, width, color) {
    if (!item1 || !item2) return;
    
    var mbox = matching.getBoundingClientRect();
    var bbox = item1.getBoundingClientRect();
    var vbox = item2.getBoundingClientRect();
    
    ctx.beginPath() ;
    ctx.lineWidth = width;
    ctx.strokeStyle = color; 
    
    ctx.moveTo(bbox.left - mbox.left + bbox.width, bbox.top - mbox.top  + bbox.height/2 );
    ctx.lineTo(vbox.left - mbox.left, vbox.top - mbox.top + vbox.height/2 );
    ctx.stroke();
}

function deactualizeList(lClass) {
    actMatching = actMatching || document.querySelector(".matching_m") ;
    
    var lis = actMatching.querySelectorAll(lClass + " li");
    
    if (!lis || lis.length == 0 ) return;
    
    for (var i = 0; i< lis.length; i++) {
        lis[i].classList.remove("actual");
    }
    
}