import * as grids from '../index';
import { Grid, Cell } from '../index';
import DAT  = require('dat-gui');



export const drawToCanvas = function( grid : Grid, ctx:CanvasRenderingContext2D, shouldFillRect:boolean=false, showIndices:boolean=false ){
    shouldFillRect = !!shouldFillRect;
    var cells = grids.createCells(grid);

    if( shouldFillRect ){
        ctx.fillRect(grid.x, grid.y, grid.width, grid.height);
    }

    var cell;

    for( var i=0; i<cells.length; i++ ){
        cell = cells[i];
        ctx.strokeRect( cell.x, cell.y, cell.width, cell.height );
        if(showIndices){
            ctx.fillText(String(i), cell.x + (cell.width*0.02), cell.y + cell.height - (cell.height*0.02));
        }
    }
};

export default function init(mainContainer:HTMLElement, infoContainer:HTMLElement) : void {

    const gui = new DAT.GUI();


    const canvas : HTMLCanvasElement = document.createElement('canvas'),
        ctx : CanvasRenderingContext2D = canvas.getContext('2d');

    const drawGrid = function(grid : Grid){
        ctx.strokeStyle = 'red';
        ctx.strokeRect(grid.x, grid.y, grid.width, grid.height);
        ctx.strokeStyle = 'blue';
        ctx.font = '12px Arial';
        ctx.fillStyle = 'blue';
        drawToCanvas(grid, ctx, false, state.showIndices);
    };


/**
 * Draw a grid on to a canvas context
 * @param {Object} grid
 * @param {CanvasRenderingContext2D} ctx
 * @param {Boolean} shouldFillRect should the whole grid get a base fill?
 */


    var gridSettings : Grid = {
        x: 20,
        y: 20,
        width: window.innerWidth - 200,
        height: window.innerHeight - 300,
        paddingLeft: 10,
        paddingRight: 4,
        paddingTop: 10,
        paddingBottom: 20,
        columns: 6,
        rows: 3,
        outerPadding: true,
        rowMajor: true
    };

    const state = {
        showIndices: false
    };


    const printObject = (obj)=>
        obj ?
        JSON.stringify(obj, null, '  ').replace(/\n/g,'<br/>') :
        undefined;


    const createCellsOutput = document.createElement('pre');
    createCellsOutput.style.cssFloat = 'left';

    const intersectsCellOutput = document.createElement('pre');
    intersectsCellOutput.style.cssFloat = 'left';


    function update(){
        canvas.width = gridSettings.width + 30 + gridSettings.x;
        canvas.height = gridSettings.y + gridSettings.height + 10;
        drawGrid(gridSettings);
        createCellsOutput.innerHTML = `grid = ${printObject(gridSettings)};`;
    }

    update();

    gui.add(state, 'showIndices').onChange(update);
    const gridFolder = gui.addFolder('grid settings');
    gridFolder.open();

    gridFolder.add(gridSettings, 'x', 0, 400).step(1).onChange(update);
    gridFolder.add(gridSettings, 'y', 0, 400).step(1).onChange(update);
    gridFolder.add(gridSettings, 'width', 100, 1400).step(1).onChange(update);
    gridFolder.add(gridSettings, 'height', 100, 1000).step(1).onChange(update);
    gridFolder.add(gridSettings, 'columns', 1, 64).step(1).onChange(update);
    gridFolder.add(gridSettings, 'rows', 1, 64).step(1).onChange(update);
    gridFolder.add(gridSettings, 'paddingLeft', 0, 32).step(1).onChange(update);
    gridFolder.add(gridSettings, 'paddingRight', 0, 32).step(1).onChange(update);
    gridFolder.add(gridSettings, 'paddingTop', 0, 32).step(1).onChange(update);
    gridFolder.add(gridSettings, 'paddingBottom', 0, 32).step(1).onChange(update);
    gridFolder.add(gridSettings, 'outerPadding').onChange(update);
    gridFolder.add(gridSettings, 'rowMajor').onChange(update);



    mainContainer.appendChild(canvas);
    infoContainer.appendChild(createCellsOutput);
    infoContainer.appendChild(intersectsCellOutput);


    window.addEventListener('mousemove', (event)=>{
        const x = event.pageX - canvas.offsetLeft;
        const y = event.pageY - canvas.offsetTop;
        const cell = grids.intersectsCell(gridSettings, { x, y });
        const closestCell = grids.closestCell(gridSettings, {x,y});

        const cellPosition = grids.intersectsCellPosition(gridSettings, {x,y});
        const closestPosition = grids.closestCellPosition(gridSettings, {x,y});

        update();
        ctx.fillRect(cell.x, cell.y, cell.width, cell.height);
        ctx.fillStyle = 'rgba(0, 0, 255, 0.25)';
        ctx.fillRect(closestCell.x, closestCell.y, closestCell.width, closestCell.height);
        intersectsCellOutput.innerHTML = `
grid2d.closestCellPosition(grid, {x: ${x}, y: ${y}})
${printObject(closestPosition)}}

grid2d.intersectsCellPosition(grid, {x: ${x}, y: ${y}})
${printObject(cellPosition)}`;
    });
};

init(document.querySelector('#main'), document.querySelector('#info'));