import * as React from "react";
import { observer } from "mobx-react";

import { RowModel } from "../models/RowModel";
import { GroupRow } from "./GroupRow";

import * as theme from "./GroupRows.scss";

@observer
export class GroupRows extends React.Component<any, any> {

    render() {
        const { rows, ...props } = this.props;

        return (
            <div className={theme.rows}>
                {
                    rows.map(function(row : RowModel) {
                        // console.log("RowVisible: " + row.isVisible);

                        return row.isVisible ?
                            <GroupRow row={row}
                                      key={row.index}
                                      {...props}
                            />
                            : null;
                    })
                }
            </div>
        );
    }
}