import * as grid2d from '../index';
import animitter from 'animitter';
import DAT from 'dat-gui';


export default function() : void {

    const menu = document.createElement('div');
    const output = document.createElement('div');

    output.style.webkitUserSelect = 'none';
    menu.appendChild(output);

    let shift = {
        columns: 1,
        rows: 0
    };

    let grid : grid2d.Grid = {
        width: 600,
        height: 600,
        columns: 100,
        rows: 27,
        paddingLeft: 2,
        paddingRight: 2,
        paddingTop: 2,
        paddingBottom: 2
    };

    const canvas : HTMLCanvasElement = document.createElement('canvas'),
        hueScale : number = 48 * grid.rows,
        currentHue : number = 0,
        ctx : CanvasRenderingContext2D = canvas.getContext('2d');

	document.body.appendChild(canvas);

    var updateOutput = function(){
        output.innerHTML = 'shift ' + shift.columns + ' columns, ' + shift.rows + ' rows';
    };

    // var sliderCols = gui.slider(shift, 'columns', { height: 25, step: 1, min: -3, max: 3 }),
    //     sliderRows = gui.slider(shift, 'rows', { height: 25, step: 1, min: -3, max: 3 });

    // sliderRows.el.style.paddingLeft = '5px';

    // _.chain([sliderCols, sliderRows])
    //     .invoke('enable')
    //     .each(function(ui){
    //         ui.on('change', updateOutput);
    //     });

    updateOutput();
    // menu.appendChild(sliderCols.el);
    // menu.appendChild(sliderRows.el);
    // document.body.appendChild(menu);


    var drawCell = function( cell ){
        ctx.fillStyle = cell.color ? cell.color.toHexCSS() : '#ffffff';
        ctx.fillRect(cell.x,cell.y,cell.width,cell.height);
    };

    var updateColors = function(){
		grid2d.createCells(grid).forEach(cell=>{
            if( !cell.color ){
                //cell.color = TColor.newHSV( currentHue/hueScale, cell.row/grid.rows + 0.1, 0.9);
                currentHue++;
            }
        });
    };


    window.loop = animitter({ }, function(){

        canvas.width = grid.width;
        canvas.height = grid.height;
        //ctx.clearRect(0,0,grid.width,grid.height);
        grid.cells.forEach(drawCell);
        this.emit('shift');
    });

    window.loop.on('shift', function(){
        grids.shiftCells(grid, shift);
    });

    window.loop.on('shift', updateColors);

    window.loop.start();






};