import React from 'react';
import ReactDOM from 'react-dom';
import Immutable from 'immutable';


const Cell = React.createClass({
    render() {
        let classname = this.props.occupied ? "cell occupied" : "cell";
        return <div className={classname} style={{top:this.props.y, left:this.props.x}}></div>;
    },
});


const Board = React.createClass({
    //render() {
    //    let nh = this.props.settings.height || 10,
    //        nw = this.props.settings.width || 10,
    //        ot = this.props.settings.offsetTop || 0,
    //        ol = this.props.settings.offsetLeft || 0,
    //        cells = [];
    //    for( let i = 0; i < nh; i++ ) {
    //        for( let j = 0; j < nw; j++ ) {
    //            let x = (((j % nw) * 10) + ol) + 'px',
    //                y = ((i * 10) + ot) + 'px';
    //            cells.push( <Cell x={x} y={y} /> );
    //        }
    //    }

    //    return (
    //        <div>
    //            {cells}
    //        </div>
    //    );
    //},
    render() {
        let ot = this.props.settings.offsetTop || 0,
            ol = this.props.settings.offsetLeft || 0;
        let cells = this.props.world.flatMap(function (row, y) {
            return row.map(function eachCell(cell, x) {
                let xc = ((x * 10) + ol) + 'px',
                    yc = ((y * 10) + ot) + 'px',
                    occu = ( !(x%2) && !(y%2) );
                console.log('occupied?', x, y, occu);
                return <Cell x={xc} y={yc} occupied={occu} />;
            });
        }).toJS();

        return <div>
            {cells}
        </div>;
    },
});




let settings = {
    offsetTop:40,
    offsetLeft:10,
    width:50,
    height:20
};
function generateWorld(w = 10, h = 10) {
    let grid = [];
    for( let i = 0; i < h; i++ ) {
        let row = [];
        for( let j = 0; j < w; j++ ) {
            row.push(0);
        }
        grid.push(row);
    }
    return Immutable.fromJS(grid);
}
let world = generateWorld(100, 20);

ReactDOM.render(
    <Board settings={settings} world={world} />,
    document.getElementById('board')
);