import React from 'react';
import { Row } from 'react-bootstrap';
import ReactGridCell from './react-grid-cell';
import Expandable from './expandable';
import { Size } from '../commons/grid-utils';

export default class ReactGrid extends React.Component {

    constructor(props) {
        super(props);
        this.cellRender = this.cellRender.bind(this);
    }

    gridRender() {
        const vals = this.props.values;

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

        let size = new Size();

        // cell render
        let cells = [];
        vals.forEach((item, index) => {
            // get the cell size (width)
            const cellSize = onCellSize ? onCellSize(item) : this.props.cellSize;

            // rend cell
            const cell = React.createElement(ReactGridCell, { key: index, initialSize: cellSize,
                value: item,
                onRender: this.cellRender,
                index: index,
                onClick: this.props.onReactCellClick });

            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 - 1) {
                // add cells to the row
                rows.push(React.createElement(
                    Row,
                    { key: index },
                    cells
                ));
                // empty the left size
                size = new Size();
                // empty cells
                cells = [];
            }
        });

        return rows;
    }

    cellRender(item, cell) {
        // check if there is a row render defined
        if (this.props.onCellRender) {
            const content = this.props.onCellRender(item, cell);
            // render returned any content ?
            if (content) {
                return content;
            }
        }

        const collapsed = this.props.onCollapseRender ? this.props.onCollapseRender(item, cell) : null;

        const clickable = !!this.props.onExpandRender;

        const self = this;
        const expandRender = it => {
            if (self.props.onExpandRender) {
                return self.props.onExpandRender(it, cell);
            }
            return null;
        };

        return React.createElement(
            'div',
            { className: 'card card-small tbl-row' },
            clickable ? React.createElement(
                Expandable,
                { ref: 'exp', onExpandRender: expandRender, value: item, className: 'card-content' },
                collapsed
            ) : collapsed
        );
    }

    render() {
        const className = this.props.onCollapseRender ? 'tbl-hover' : null;

        return React.createElement(
            'div',
            { className: className, style: { clear: 'both' } },
            this.gridRender()
        );
    }
}

ReactGrid.propTypes = {
    onCellRender: React.PropTypes.func,
    onCollapseRender: React.PropTypes.func,
    onExpandRender: React.PropTypes.func,
    cellSize: React.PropTypes.object,
    values: React.PropTypes.array,
    /**
     * Function to return custom cell size in format func(item)
     * @type {object} Object containing the size in several bootstrap sizes
     */
    onCellSize: React.PropTypes.func,
    /**
     * function that will be called when the user clicks on the reactCell
     * @type {[type]}
     */
    onReactCellClick: React.PropTypes.func
};

ReactGrid.defaultProps = {
    cellSize: { sm: 6 }
};