class Visible
{
    constructor(containingDomElement, tag = "div", display = "block")
    {
        this.domElement = document.createElement(tag);
        containingDomElement.appendChild(this.domElement);
        this.display = display;
    }

    show()
    {
        this.domElement.style.display = this.display;
    }

    hide()
    {
        this.domElement.style.display = "none";
    }

    isVisible()
    {
        return !this.domElement.style.display == "none";
    }
}

class Title extends Visible
{
    constructor(domParent, text)
    {
        super(domParent);
        this.text = text;
        let s = this.domElement.style;
        s.padding = "10px";
        this.domElement.innerHTML = this.text;
        s.fontSize = "24pt";
        s.textAlign = "center";
    }

}

class Canvas extends Visible
{
    constructor()
    {
        super(document.body);
        document.body.style.margin = "0";
        this.nCells = 10;
        this.size = this.getSize();
        this.cellSize = this.getCellSize();
        this.title = new Title(this.domElement, "Select a colour and pick the box to paint");
        this.cells = new Array(this.nCells);
        for(let r = 0; r < this.nCells; ++r)
            this.cells[r] = new Row(this.domElement, this.cellSize, this.nCells);
        
        this.pallet = new Pallet(this.domElement, this.cellSize, this.nCells);
    }

    getSize()
    {
        return 0.7 * Math.min(window.innerHeight, window.innerWidth);
    }

    getCellSize()
    {
        return this.getSize() / (this.nCells + 1);
    }
}

class Row extends Visible
{
    constructor(domElement, cellSize, length)
    {
        super(domElement);
        this.rowCells = new Array(length);
        let s = this.domElement.style;
        s.width = cellSize * length + 1;
        s.textAlign = "center";
        for(let c = 0; c < length; ++c)
        {
            let cell = new Cell(this.domElement, cellSize);
            cell.domElement.onclick = ()=>
            {
                cell.setColor(Pallet.currentColor);
            }
            this.rowCells[c]  = cell;
        }
    }

    getCell(i)
    {
        return this.rowCells[i];
    }
}

class Cell extends Visible
{
    constructor(domParent, size)
    {
        super(domParent, "div", "inline-block");
        this.size = size;
        let s = this.domElement.style;
        s.width = size + "px";
        s.height = size + "px";
        s.border = "black solid 2px";
        s.margin = "1px";
        s.display = "inline-block";
        s.boxSizing = "border-box";
    }

    getColor()
    {
        return this.domElement.style.backgroundColor;
    }

    setColor(color)
    {
        this.domElement.style.backgroundColor = color;
    }
}

class Pallet extends Visible
{
    static N_COLORS = 7;
    static COLORS = [
        "white",
        "red",
        "green",
        "blue",
        "purple", 
        "orange",
        "yellow",
    ];
    static currentColor = 0;

    constructor(domParent, cellSize, nCells)
    {
        super(domParent);
        this.cellSize = cellSize;
        this.nCells = nCells;
        this.domElement.style.marginTop = "10px";

        if(nCells < Pallet.N_COLORS + 2)
            throw Error("nCells < " + Pallet.N_COLORS + 2);

        this.row = new Row(this.domElement, cellSize, nCells);
        
        this.selectedColor = this.row.getCell(0);

        for(let c = 0; c < Pallet.N_COLORS; ++c)
        {
            let cell = this.row.getCell(nCells - Pallet.N_COLORS + c);
            cell.setColor(Pallet.COLORS[c]);

            cell.domElement.onclick = ()=>
            {
                Pallet.currentColor = cell.getColor();
                this.selectedColor.setColor(Pallet.currentColor);
            }
        }

        // empty space
        for(let c = 1; c < nCells - Pallet.N_COLORS; ++c)
        {
            let domElement =  this.row.getCell(c).domElement;
            domElement.onclick = ()=>{};
            let s = domElement.style;
            s.border = "none";
        }
    }
}

let canvas = new Canvas();
document.body.onresize = ()=>
{
    for(let r = 0; r < canvas.nCells; ++r)
    {
        for(let c = 0; c < canvas.nCells; ++c)
        {
            let cell = canvas.cells[r].rowCells[c];
            cell.domElement.style.width  = canvas.getCellSize() + "px";
            cell.domElement.style.height = canvas.getCellSize() + "px";
        }
    }

    for(let c = 0; c < canvas.pallet.nCells; ++c)
    {
        let cell = canvas.pallet.row.rowCells[c];
        cell.domElement.style.width  = canvas.getCellSize() + "px";
        cell.domElement.style.height = canvas.getCellSize() + "px";
    }
}