// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

var lineLength = 20;
var treeHeight = 1;

function drawGrid(treeHeight, lineLength) {
    var width = 0;
    for (i = 0; i <= treeHeight - 1; i++) {
        width = width + Math.pow(3, treeHeight - i - 1);
    }
    width = width * 2;
    return width;
}

var width = drawGrid(3, 1);
var height = Math.sqrt((3/4)*Math.pow(width, 2))

//draw horizontal lines
for (i = 0; i < width+3; i++) { //+3 and +2 in the function r padding
    context.beginPath();
    context.moveTo(0, i*lineLength*(height/width));
    context.lineTo((width+2)*lineLength, i*lineLength*(height/width));
    context.stroke();
}

context.fillStyle = "black";

//draw two vertical border lines
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, lineLength*(width+2)*(height/width));
context.stroke();
context.beginPath();
context.moveTo((width+2)*lineLength, 0);
context.lineTo((width+2)*lineLength, lineLength*(width+2)*(height/width));
context.stroke();

//draw the vertical (left leaning) lines
//--------------------------------------------------------------------------------
for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo(0.5*lineLength+lineLength*i, lineLength*(width+2)*(height/width));
        context.lineTo(0, height*lineLength - (lineLength*2*(height/width))*i + (lineLength*(height/width)));
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo(lineLength+lineLength*i, lineLength*(width+2)*(height/width));
        context.lineTo(0, height*lineLength - (lineLength*2*(height/width))*i);
        context.stroke();
    }
}

for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo(lineLength+lineLength*i - 0.5*lineLength + ((width/2)+1)*lineLength, lineLength*(width+2)*(height/width));
        context.lineTo(lineLength*i + 0.5*lineLength, 0);
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo(lineLength+lineLength*i + ((width/2)+1)*lineLength, lineLength*(width+2)*(height/width));
        context.lineTo(lineLength+lineLength*i, 0);
        context.stroke();
    }
}

for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo((width+2)*lineLength, height*lineLength - (lineLength*2*(height/width))*i + (lineLength*(height/width)));
        context.lineTo(lineLength+lineLength*i + ((width/2)+1)*lineLength - 0.5*lineLength, 0);
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo((width+2)*lineLength, height*lineLength - (lineLength*2*(height/width))*i);
        context.lineTo(lineLength+lineLength*i + ((width/2)+1)*lineLength, 0);
        context.stroke();
    }
}
//--------------------------------------------------------------------------------

//draw the vertical (right leaning) lines
//--------------------------------------------------------------------------------
for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo(0, height*lineLength - (lineLength*2*(height/width))*i + (lineLength*(height/width)));
        context.lineTo(lineLength*(width)/2 - lineLength*i + 0.5*lineLength, 0);
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo(0, (lineLength*2*(height/width))*i + (lineLength*2*(height/width)));
        context.lineTo(lineLength + lineLength*i, 0);
        context.stroke();
    }
}

for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo(0.5*lineLength+lineLength*i, lineLength*(width+2)*(height/width));
        context.lineTo(lineLength+lineLength*i + ((width/2)+1)*lineLength - 0.5*lineLength, 0);
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo(lineLength+lineLength*i, lineLength*(width+2)*(height/width));
        context.lineTo(lineLength+lineLength*i + ((width/2)+1)*lineLength, 0);
        context.stroke();
    }
}

for (i = 0; i < (width/2)+1; i++) { //+3 and +2 in the function r padding
    if (width%4===0) { //when shit is even
        context.beginPath();
        context.moveTo(lineLength+lineLength*i - 0.5*lineLength + ((width/2)+1)*lineLength, lineLength*(width+2)*(height/width));
        context.lineTo((width+2)*lineLength, (lineLength*2*(height/width))*i + (lineLength*(height/width)));
        context.stroke();
    } else { //when shit is odd
        context.beginPath();
        context.moveTo(lineLength+lineLength*i + ((width/2)+1)*lineLength, lineLength*(width+2)*(height/width));
        context.lineTo((width+2)*lineLength, (lineLength*2*(height/width))*i + (lineLength*2*(height/width)));
        context.stroke();
    }
}
//--------------------------------------------------------------------------------


//drawNode(x, y, z)
function drawNode(x, y, z) {
    var xAdjust = 0;
    xAdjust = xAdjust + x*lineLength; //x
    xAdjust = xAdjust - y*0.5*lineLength; //y
    xAdjust = xAdjust + z*0.5*lineLength; //z
    var yAdjust = 0;
    if (y!==0) {
        yAdjust = yAdjust - Math.abs(y)/y * Math.sqrt((3/4)*Math.pow(lineLength*y, 2)); //y
    }
    if (z!==0) {
        yAdjust = yAdjust - Math.abs(z)/z * Math.sqrt((3/4)*Math.pow(lineLength*z, 2)); //z
    }

    context.fillStyle = "black";
    context.beginPath();
    context.arc(((width+2)*lineLength)/2 + xAdjust, (lineLength*(width+2)*(height/width))/2 + yAdjust, 5, 0, 2*Math.PI);
    context.closePath();
    context.fill();
    //return yAdjust;
    return;
}

//Function to draw the lines between nodes
function drawLine(xfrom, yfrom, zfrom, xto, yto, zto) {
    context.strokeStyle = "red";
    context.lineWidth = 3;

    var xAdjustfrom = 0;
    xAdjustfrom = xAdjustfrom + xfrom*lineLength; //x
    xAdjustfrom = xAdjustfrom - yfrom*0.5*lineLength; //y
    xAdjustfrom = xAdjustfrom + zfrom*0.5*lineLength; //z
    var yAdjustfrom = 0;
    if (yfrom!==0) {
        yAdjustfrom = yAdjustfrom - Math.abs(yfrom)/yfrom * Math.sqrt((3/4)*Math.pow(lineLength*yfrom, 2)); //y
    }
    if (zfrom!==0) {
        yAdjustfrom = yAdjustfrom - Math.abs(zfrom)/zfrom * Math.sqrt((3/4)*Math.pow(lineLength*zfrom, 2)); //z
    }

    var xAdjustto = 0;
    xAdjustto = xAdjustto + xto*lineLength; //x
    xAdjustto = xAdjustto - yto*0.5*lineLength; //y
    xAdjustto = xAdjustto + zto*0.5*lineLength; //z
    var yAdjustto = 0;
    if (yto!==0) {
        yAdjustto = yAdjustto - Math.abs(yto)/yto * Math.sqrt((3/4)*Math.pow(lineLength*yto, 2)); //y
    }
    if (zto!==0) {
        yAdjustto = yAdjustto - Math.abs(zto)/zto * Math.sqrt((3/4)*Math.pow(lineLength*zto, 2)); //z
    }

    context.beginPath();
    context.moveTo(((width+2)*lineLength)/2 + xAdjustfrom, (lineLength*(width+2)*(height/width))/2 + yAdjustfrom);
    context.lineTo(((width+2)*lineLength)/2 + xAdjustto, (lineLength*(width+2)*(height/width))/2 + yAdjustto);
    context.stroke();

    return;
}

context.fillStyle = "black";

// Write "Hello, World!"
context.font = "30px Garamond";
//context.fillText(drawNode(1, 1, 1),15,175);
//context.fillText(height,15,150);

function parse(text){

                    function maketree(index, root){

                        while(true){

                            var laatstekomma = text.lastIndexOf(',', index-1);
                            var laatstehaakje = text.lastIndexOf(')', index-1);
                            var laatstesluitend = text.lastIndexOf('(', index-1);

                            if (laatstesluitend == -1 && laatstekomma == -1){ // er is geen sluitend ding of komma meer dus alles is geparsed (gebeurt alleen bij eerste keer aanroepen)
                                var naam = text.substring(0, index).trim();
                                var newchild = new node(naam, root, []);
                                var newindex = 0;

                                root.children.push(newchild);
                                return 0;
                            }

                            if (text.charAt(index) == '(') { // laatste element subtree is net geparsed
                                return Math.max(text.lastIndexOf(',', index - 1), text.lastIndexOf('(', index - 1)) + 1;
                            }

                            if (laatstekomma < laatstehaakje && laatstesluitend < laatstehaakje){ // heeft een subtree
                                var naam = text.substring(laatstehaakje + 1, index).trim();
                                var newchild = new node(naam, root, []);

                                var newindex = maketree(laatstehaakje, newchild);

                                root.children.push(newchild);

                                index = newindex - 1;
                            }

                            if (laatstehaakje < laatstesluitend || laatstehaakje < laatstekomma){ // heeft geen subtree
                                var poep = Math.max(laatstesluitend, laatstekomma);
                                var naam = text.substring(poep + 1, index).trim();
                                var newchild = new node(naam, root, []);

                                root.children.push(newchild);

                                index = poep;
                            }


                        }
                    }

                    text = text.trim();
                    text = text.replace(/\n/g, "");
                    console.log(text);
                    var superroot = new node("", null, []);
                    maketree(text.length - 1, superroot);
                    var echteroot = superroot.children[0];
                    echteroot.parent = null;
                    return echteroot;
                }

class node{
    constructor(name, parent, children) {
        this.parent = parent
        this.children = children
        this.name = name
        //this.descendentsAmount = null
    }

    get childrenAmount(){
        return this.children.length;
    }
    get descendentsAmount(){
        //if (this.descendentsAmount == null){
            var tmp = 0
            for (var child of this.children){
                tmp += child.descendentsAmount + 1
            }
            return tmp
        //}
        //return this.descendentsAmount
    }
    get height(){
        var max = 0;
        for (var child of this.children){
            max = Math.max(max, child.height + 1);
        }
        return max;
    }

}

var trueRoot;

function drawTree(root, pdir, x, y, z, depth) {
    //direction to the right is 1, then mod 6
    var dir = (1+pdir)%6;
    if (pdir == -1) {
        i = -1;
        trueRoot = root;
    } else {
        i = 0;
    }
    drawNode(x, y, z) //draw root node
    var linelength = Math.pow(3, trueRoot.height-depth-1); //need the fucking depth for this
    for (var child of root.children) {
        console.log(root.name + " " + child.name + " " + dir + " " + depth);
        if (i > 4) {
            break;
        } else {
            if (i == -1) {
                context.fillText(dir,60,300);
                context.fillText(x+linelength,90,300);
                context.fillText(y,60,300);
                context.fillText(z,60,300);
            }
            i++
            if (dir == 0) { //pdir 6
                drawLine(x, y, z, x+linelength, y, z);
                drawTree(child, 3, x+linelength, y, z, depth+1);
            } else if (dir == 1) {
                drawLine(x, y, z, x, y-linelength, z);
                drawTree(child, 4, x, y-linelength, z, depth+1);
            } else if (dir == 2) {
                drawLine(x, y, z, x, y, z-linelength);
                drawTree(child, 5, x, y, z-linelength, depth+1);
            } else if (dir == 3) {
                drawLine(x, y, z, x-linelength, y, z);
                drawTree(child, 0, x-linelength, y, z, depth+1);
            } else if (dir == 4) {
                drawLine(x, y, z, x, y+linelength, z);
                drawTree(child, 1, x, y+linelength, z, depth+1);
            } else if (dir == 5) {
                drawLine(x, y, z, x, y, z+linelength);
                drawTree(child, 2, x, y, z+linelength, depth+1);
            }
            console.log(dir)
            dir = (dir+1)%6
            //drawLine(x, y, z, 3, 0, 0)
            context.fillText(dir,15,300);
        }
    }
}

drawTree(parse("(A,B,(C,(Z,N)D,G,H)E)F;"), -1, 0, 0, 0, 0);

//
//      Example function by pieter
//
//function printtree(root, pre){
//    var string = "";
//    if (pre.length != 0)
//        string += pre + "-";
//    string += root.name + "\n";

//    for (var child of root.children){
//        string += printtree(child, pre + (pre.length != 0 ? " |" : "|"));
//        if(child != root.children[root.children.length - 1] && child.childrenAmount != 0)
//            string += pre + (pre.length != 0 ? " |" : "|") + "\n"
//    }
//    return string
//}