import * as React from "react";
import { IconButton } from "react-toolbox";

import * as theme from "./GridGroupExpander.scss";
import { GridGroupModel } from "../../model";
import { observer } from "mobx-react";
import { action } from "mobx";

export interface GridGroupExpanderProps {
    group : GridGroupModel;
    show : boolean;
}

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

    props : GridGroupExpanderProps;

    constructor(props : any) {
        super(props);

        this.expand = this.expand.bind(this);
    }

    @action
    expand() {
        this.props.group.expanded = !this.props.group.expanded;
    }

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

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

        return (
            <tbody className={css}>
                <tr>
                    <td colSpan={999} onClick={this.expand}>
                        <IconButton className={group.expanded ? null : theme.expanded} icon="expand_more"/>
                        <span className={theme.groupTitle}>-- { group.name } --</span>
                    </td>
                </tr>
            </tbody>
        );
    }
}