import * as React from "react";
import { GridRow } from "../../row/GridRow";
import { GridRowModel, GridColumnModel } from "../../model";

import * as theme from "./GroupData.scss";
import { observer } from "mobx-react";

export interface GroupDataProps {
    showGroups : boolean;
    show : boolean;
    columns : GridColumnModel[];
    rows : GridRowModel[];
    onChangeData(value : any) : void;
    onRowSelect(row : GridRowModel, col : string);
    onStartSelect(row : GridRowModel, col : string);
    onEditCell(row : GridRowModel, col : string);
    onTrySelect(row : GridRowModel);
}

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

    props : GroupDataProps;

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

        const css = [
            theme.data,
            show ? "" : theme.hidden
        ].join(" ");

        return (
            <tbody className={"data " + css}>
                {
                    rows.map((row, idx) => {
                        return row.isVisible && <GridRow row={row} key={row.uniqueId}
                                                         columns={this.props.columns}
                                                         showGroups={this.props.showGroups}
                                                         onEditCell={this.props.onEditCell}
                                                         onTrySelect={this.props.onTrySelect}
                                                         onChangeData={this.props.onChangeData}
                                                         onStartSelect={this.props.onStartSelect}
                                                         onRowSelect={this.props.onRowSelect}
                            />;
                    })
                }
            </tbody>
        );
    }
}