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

import { GroupTitle } from "./GroupTitle";
import { GroupRows } from "../rows/GroupRows"

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

export const GridGroup = observer(function GridGroup(props : any) {
    const { group, ...restProps } = props;

    const shown = group.showTitle && group.visibleRowCount > 0;

    const css = [
        theme.group,
        !group.expanded ? theme.collapsed : "",
        shown ? theme.shown : ""
    ].join(" ");

    return (
        <div className={css}>
            { shown && <GroupTitle group={group}/> }
            <GroupRows rows={group.rows} {...restProps}/>
        </div>
    );
});