var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import { Row, Col } from 'react-bootstrap';
import { Size } from '../commons/grid-utils';

export default class GridTable extends React.Component {

    /**
     * Render the grid in multiple rows mode
     * @return {array} List of React components
     */
    gridRender() {
        const vals = this.props.values;

        const rows = [];
        const onCellSize = this.props.onCellSize;

        let size = new Size();

        const cellRender = this.props.onCellRender;
        if (!cellRender) {
            return null;
        }

        // cell render
        let index = 1;
        let cells = [];
        vals.forEach(item => {
            // generate content
            const content = cellRender(item, index - 1);

            // get the cell size (width)
            const cellSize = onCellSize ? onCellSize(item) : this.props.cellSize;

            // rend cell
            const cell = React.createElement(
                Col,
                _extends({}, cellSize, { key: index }),
                content
            );

            cells.push(cell);

            size.add(cellSize);

            // check if next cell fits in ermaining size or if it is the last item
            if (!size.fitInSize(cellSize) || index === vals.length) {
                // add cells to the row
                rows.push(React.createElement(
                    Row,
                    { key: index },
                    cells
                ));
                // empty the left size
                size = new Size();
                // empty cells
                cells = [];
            }
            index++;
        });

        return rows;
    }

    /**
     * Render the grid in sigle column mode
     * @return {array} List of React components
     */
    singleColRender() {
        const vals = this.props.values;

        const rows = [];

        const cellRender = this.props.onCellRender;
        if (!cellRender) {
            return null;
        }

        // cell render
        let index = 1;
        vals.forEach(item => {
            // rend cell
            const row = React.createElement(
                Row,
                { key: index },
                cellRender(item)
            );

            rows.push(row);

            index++;
        });

        return rows;
    }

    render() {
        if (!this.props.values) {
            return null;
        }

        return React.createElement(
            'div',
            { className: 'grid-table' },
            this.props.singleColumn ? this.singleColRender() : this.gridRender()
        );
    }
}

GridTable.propTypes = {
    onCellRender: React.PropTypes.func,
    cellSize: React.PropTypes.object,
    values: React.PropTypes.array,
    singleColumn: React.PropTypes.bool,
    /**
     * Function to return custom cell size in format func(item)
     * @type {object} Object containing the size in several bootstrap sizes
     */
    onCellSize: React.PropTypes.func
};

GridTable.defaultProps = {
    cellSize: { sm: 6 },
    singleColumn: false
};