require('../../sass/board/grid.scss');

import { Component } from 'react';
import { connect } from 'react-redux';

import GridCell from './grid-cell.component';
import SETTINGS from '../../AppSettings';

export class Grid extends Component {
    render() {
        const { values } = this.props.values;
        const cells = [];

        this.props.values.map((v, i) => {
            const x = i % SETTINGS.GRID_WIDTH;
            const y = Math.floor(i / SETTINGS.GRID_WIDTH);
            cells.push(<GridCell value={v.value} show={v.show} x={x} y={y} key={i} />);
        });

        return (<div className='grid'>{cells}</div>);
    };
};

const select = (state) => {
    return {
        values: state.grid
    }
}

export default connect(select)(Grid);